Для удобства программистов в каждом браузере есть специальная панель разработчика. Чтобы открыть эту панель, вам нужно, находясь на странице сайта кликнуть правой кнопкой мышки в любое место. В появившемся меню нужно выбрать самый нижний пункт (он будет называться Inspect или как-то похоже на это).
В открывшейся панели вы в основном будете пользоваться двумя вкладками: Elements и Console. В первой вкладке вы можете получать информацию по тегам страницы, а во второй - отладочную информацию JavaScript.
Давайте разберемся с возможностями консоли.
С помощью специальной команды
console.log вы в своих скриптах
можете выводить данные в консоль.
Это применяется для того, чтобы
заниматься отладкой программ.
Давайте для примера что-нибудь выведем в консоль:
console.log(123);
А теперь выведем значение переменной:
let num = 123;
console.log(num);
Можно вывести несколько переменных по очереди:
let num1 = 123;
let num2 = 456;
console.log(num1);
console.log(num2);
Можно вывести несколько переменных с помощью одной команды, написав эти переменные через запятую:
let num1 = 123;
let num2 = 456;
console.log(num1, num2);
Дана переменная. Выведите в консоль ее значение.
Даны три переменные. Выведите в консоль их значения.
Тип данных в консоли
В консоли разным цветом выводятся строки и числа. Это часто помогает найти ошибки в программах.
Давайте выведем рядом число и строку, чтобы можно было увидеть разницу в цвете:
console.log(123);
console.log('123');
Выведите в консоль все известные вам типы данных. Посмотрите, чем отличается их цвет.
Ошибки в консоли
Когда вы в вашем коде допускаете синтаксическую ошибку, JavaScript выведет информацию об этом в консоль. Такая ошибка будет выведена красным цветом, а справа от нее будет указан номер строки, на которой случилась эта ошибка. Этот номер является ссылкой - на него можно нажать и в консоли откроется ваш код на строке с ошибкой.
Давайте попробуем на практике. Обратимся к несуществуещей переменной. В этом случае JavaScript выдаст ошибку:
alert(eee); // Uncaught ReferenceError: eee is not defined
Сознательно допустите ошибку в вашем коде. Убедитесь, что ошибка появляется в консоли. Определите, в какой строке кода случилась ошибка.