Код подвержен ошибкам. Вы, вполне вероятно, будете допускать ошибки... О, о чем я говорю? Вы обязательно будете совершать ошибки, по крайней мере, если вы человек, а не робот.
Но в браузере пользователи по умолчанию не видят ошибок. То есть, если в скрипте что-то пойдет не так, мы не увидим, что сломалось, и не сможем это исправить.
Чтобы увидеть ошибки и получить массу другой полезной информации о скриптах, в браузеры встроены «инструменты разработчика».
Большинство разработчиков предпочитают Chrome или Firefox для разработки, потому что эти браузеры имеют лучшие инструменты разработчика. Другие браузеры также предоставляют инструменты разработчика, иногда со специальными функциями, но обычно они «догоняют» Chrome или Firefox. Таким образом, у большинства разработчиков есть «любимый» браузер, и они переключаются на другие, если проблема связана с конкретным браузером.
Инструменты разработчика эффективны; у них много особенностей. Для начала мы научимся их открывать, смотреть на ошибки и запускать команды JavaScript.
Откройте страницу bug.html.
На нем есть ошибка в коде JavaScript. Он скрыт от глаз обычного посетителя, поэтому давайте откроем инструменты разработчика, чтобы его увидеть.
Нажмите F12 или, если вы используете Mac, затем Cmd + Opt + J.
Инструменты разработчика по умолчанию открываются на вкладке Консоль.
Это выглядит примерно так:
Точный внешний вид инструментов разработчика зависит от вашей версии Chrome. Время от времени оно меняется, но должно быть одинаковым.
Здесь мы видим сообщение об ошибке красного цвета. В данном случае скрипт содержит неизвестную команду «лалала».
Справа находится кликабельная ссылка на исходный код bug.html:12 с номером строки, в которой произошла ошибка.
Под сообщением об ошибке имеется синий символ > . Он отмечает «командную строку», в которой мы можем вводить команды JavaScript. Нажмите Enter , чтобы запустить их.
Теперь мы можем видеть ошибки и для начала этого достаточно. Мы вернемся к инструментам разработчика позже и более подробно рассмотрим отладку в главе «Отладка в браузере».
Многострочный ввод
Обычно, когда мы помещаем строку кода в консоль и затем нажимаем Enter , она выполняется.
Чтобы вставить несколько строк, нажмите Shift + Enter . Таким образом можно вводить длинные фрагменты кода JavaScript.
Большинство других браузеров используют F12 для открытия инструментов разработчика.
Внешний вид и ощущения у них очень похожи. Как только вы научитесь использовать один из этих инструментов (вы можете начать с Chrome), вы сможете легко переключиться на другой.
Safari (браузер Mac, не поддерживаемый Windows/Linux) здесь немного особенный. Сначала нам нужно включить «Меню разработки».
Откройте «Настройки» и перейдите на панель «Дополнительно». Внизу есть флажок:
Теперь Cmd + Opt + C может переключать консоль. Также обратите внимание, что появился новый пункт верхнего меню «Разработка». Имеет множество команд и опций.
Инструменты разработчика позволяют нам видеть ошибки, запускать команды, проверять переменные и многое другое.
Их можно открыть с помощью F12 для большинства браузеров Windows. Chrome для Mac требует Cmd + Opt + J , Safari: Cmd + Opt + C (сначала необходимо включить).
Теперь у нас есть готовая среда. В следующем разделе мы перейдем к JavaScript.