При работе с JavaScript незаменимым инструментом для отладки и проверки скриптов в настоящее время может быть консоль разработчика в веб-браузере. Современные браузеры, такие как Google Chrome (и использующие движок Chromium браузеры), Opera, FireFox и т.д. предоставляют разработчикам консоль. Рассмотрим немного работы с консолью разработчика
Консоль разработчика
Практически во всех веб-браузерах инструменты разработчика в состав которых входит и консоль выглядят одинаково. Например, чтобы открыть консоль разработчика в Microsoft Edge или Яндекс.Браузере достаточно нажать на клавиатуре клавишу F12. Например, в Microsoft Edge после нажатия F12 мы увидим:
Слева будет открытая веб-страница, а справа откроется набор инструментов разработчика. Все мы их рассматривать не будем, а сосредоточимся именно на консоли. Выберем справа вверху вкладку «Консоль»
В консоли мы можем выполнять какие-либо операции, признаком приглашения к вводу данных является символ >. Например, мы можем ввести в консоли:
> 2+2
нажать ввод и получить результат:
< 4
Кроме элементарных операций типа сложения/вычитания мы можем выполнять и методы JavaScript, например, введите в консоли следующую строку:
alert("Привет, JavaScript")
нажмите Enter и увидите сообщение, как показано на рисунке:
Отладка кода JavaScript в консоли
Консоль в инструментах разработчика используется не только для ввода каких-то значений и получения результата, но и для откладки вашего кода JavaScript, который вы пишите. Для того, чтобы вывести какое-либо значение в консоль при исполнении кода JavaScript на странице используется функция console.log. Например, напишем вот такой код страницы:
<html>
<body>
<script>
let a = 2;
let b = 3;
let s = a + b;
console.log("Результат вычислений: "+ s);
document.write("2 + 3 ="+ s);
</script>
</body>
</html>
Теперь откроем эту страницу в браузере и запустим консоль. В результате мы должны увидеть:
в коде скрипта мы объявили три переменных: a, b и s. Третьей переменной мы присвоили значение равное сумме a и b. Затем, мы вывели в консоль результат вычислений и строку в браузер.
Примечательно, что в консоли выводится не только сам результат, но и номера строк где производится тот или иной вызов:
Нажав на эту ссылку, мы можем перейти на строку с указанным номером на веб-странице:
Более того, используя настройки консоли, мы можем также увидеть потенциально опасные (с точки зрения производительности) участки кода в наших скриптах. Например, выберем в консоли подробный вывод результатов:
Теперь обновим страницу в браузере и увидим предупреждение:
Браузер сообщает нам о нарушении в строке 8, в которой используется метод document.write. Это, как минимум, говорит о том, что скрипт работает, но эта строка кода может быть потенциально опасной в том плане, что при использовании этой функции для динамической загрузки скриптов на страницу может падать производительность приложения.
Аналогичным образом в консоли могут отображаться строки с ошибками в скриптах. Например, изменим нашу страницу намеренно сделав в коде ошибку:
<html>
<body>
<script>
let a = 2;
let b = 3;
let s = a + b;
console.log("Результат вычислений: "+ с);//тут ошибка - переменной с не существует
document.write("2 + 3 ="+ s);
</script>
</body>
</html>
обновим страницу в браузере и увидим следующую ошибку:
которая нам говорит, что переменной с именем с не существует.
Итого
Консоль JavaScript в инструментах разработчика позволяет проводить отладку кода JavaScript, диагностировать ошибки, получать результаты выполнения JS-кода и т.д. В дальнейшем, мы часто будем обращаться к консоли для отладки скриптов и демонстрации их работы.