Skip to content

Latest commit

 

History

History
86 lines (53 loc) · 7.47 KB

article.md

File metadata and controls

86 lines (53 loc) · 7.47 KB

Консоль разработчика

Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде... Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые "Инструменты разработки" (Developer tools или сокращённо — devtools).

Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой "любимый" браузер. Другие используются только для отлова и исправления специфичных "браузерозависимых" ошибок.

Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.

Google Chrome

Откройте страницу bug.html.

В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите key:F12 или, если вы используете Mac, key:Cmd+Opt+J.

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

chrome

Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.

  • В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду "lalala".
  • Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

<<<<<<< HEAD Под сообщением об ошибке находится синий символ >. Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите key:Enter.

Below the error message, there is a blue > symbol. It marks a "command line" where we can type JavaScript commands. Press key:Enter to run them.

540d753e90789205fc6e75c502f68382c87dea9b

Обычно при нажатии `key:Enter` введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите `key:Shift+Enter`. Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе info:debugging-chrome.

Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.

To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на key:F12.

Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить "Меню разработки" ("Developer menu").

<<<<<<< HEAD Откройте Настройки (Preferences) и перейдите к панели "Продвинутые" (Advanced). В самом низу вы найдёте чекбокс:

Open Settings and go to the "Advanced" pane. There's a checkbox at the bottom:

540d753e90789205fc6e75c502f68382c87dea9b

safari

Теперь консоль можно активировать нажатием клавиш key:Cmd+Opt+C. Также обратите внимание на новый элемент меню "Разработка" ("Develop"). В нем содержится большое количество команд и настроек.

<<<<<<< HEAD

Итого

  • Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
  • В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав key:F12. В Chrome для Mac используйте комбинацию key:Cmd+Opt+J, Safari: key:Cmd+Opt+C (необходимо предварительное включение "Меню разработчика").

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Summary

  • Developer tools allow us to see errors, run commands, examine variables, and much more.
  • They can be opened with key:F12 for most browsers on Windows. Chrome for Mac needs key:Cmd+Opt+J, Safari: key:Cmd+Opt+C (need to enable first).

Now we have the environment ready. In the next section, we'll get down to JavaScript.

540d753e90789205fc6e75c502f68382c87dea9b