Консоль браузера і console.log

Незаменимым инструментом при работе с JavaScript является консоль браузера, которая позволяет производить отладку программы. Во многих современных браузерах есть подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer tools):

Після цього внизу браузера відкриється консоль:

Ми можемо безпосередньо вводити в консоль браузера вирази JavaScript, і вони будуть виконуватися. Наприклад, введемо в консолі такий текст:

alert("Привіт світ");

Функція alert() виводить у браузері вікно з повідомленням. У підсумку після введення цієї команди і натискання на клавішу Enter браузер виконає цю функцію і відобразить нам вікно з повідомленням:

Для виведення різного роду інформації в консолі браузера використовується спеціальна функція console.log(). Наприклад, визначимо таку веб-сторінку:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>ITshnyk</title>
</head>
<body>
    <script>
        let a = 5 + 8;
        console.log("Результат операції");
        console.log(a);
    </script>
</body>
</html>

У коді JavaScript за допомогою ключового слова let оголошується змінна a, якій присвоюється сума двох чисел 5 і 8:

let a = 5 + 8;

Далі за допомогою методу console.log() на консоль браузера виводиться деяке повідомлення

console.log("Результат операції");

І наприкінці також за допомогою методу console.log() на консоль браузера виводиться значення змінної a.

console.log(a);

І після запуску веб-сторінки в браузері ми побачимо в консолі результат виконання коду:

Що дуже корисно, у консолі браузера ви також можете помітити номери рядків коду, де саме виконувався вивід на консоль.

Надалі ми часто будемо звертатися до консолі та використовувати функцію console.log.

Причому подібний код ми могли б ввести в самій консолі:

Також послідовно вводимо інструкції і після введення кожної інструкції натискаємо на Enter.

Якщо нам треба, щоб код у консолі переносився на новий рядок без виконання, то наприкінці виразу JavaScript натискаємо на комбінацію клавіш Shift + Enter. Після введення останньої інструкції для виконання введеного коду javascript натискаємо на Enter.

Посібник по JavaScript

Консоль браузера і console.log