edit
This commit is contained in:
Ilya Kantor
parent
e78e527866
commit
05a93ced80
212 changed files with 3213 additions and 3968 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# TODO: Отладка в браузере Chrome
|
||||
|
||||
Перед тем, как двигаться дальше, поговорим об отладке скриптов.
|
||||
Перед тем, как двигаться дальше, поговорим об отладке скриптов.
|
||||
|
||||
Все современные браузеры поддерживают для этого "инструменты разработчика". Исправление ошибок с их помощью намного проще и быстрее.
|
||||
|
||||
|
|
@ -14,35 +14,34 @@
|
|||
|
||||
Зайдите на [страницу с примером](debugging/index.html) браузером Chrome.
|
||||
|
||||
Откройте инструменты разработчика: [key F12] или в меню `Инструменты > Инструменты Разработчика`.
|
||||
Откройте инструменты разработчика: `key:F12` или в меню `Инструменты > Инструменты Разработчика`.
|
||||
|
||||
Выберите сверху `Sources`.
|
||||
|
||||
<img src="chrome_sources.png">
|
||||
|
||||
|
||||
Вы видите три зоны:
|
||||
|
||||
<ol>
|
||||
<li>**Зона исходных файлов.** В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите `pow.js`, если он не выбран.</li>
|
||||
<li>**Зона текста.** В ней находится текст файлов.</li>
|
||||
<li>**Зона информации и контроля.** Мы поговорим о ней позже.</li>
|
||||
</ol>
|
||||
1. **Зона исходных файлов.** В ней находятся все подключённые к странице файлы, включая JS/CSS. Выберите `pow.js`, если он не выбран.
|
||||
2. **Зона текста.** В ней находится текст файлов.
|
||||
3. **Зона информации и контроля.** Мы поговорим о ней позже.
|
||||
|
||||
Обычно зона исходных файлов при отладке не нужна. Скройте её кнопкой <span class="devtools" style="background-position:-200px -76px"></span>.
|
||||
|
||||
## Общие кнопки управления
|
||||
|
||||
<img src="chrome_sources_buttons.png">
|
||||
|
||||
|
||||
Три наиболее часто используемые кнопки управления:
|
||||
<dl>
|
||||
<dt>Формат <span class="devtools" style="background-position:-264px 94px"></span></dt>
|
||||
<dd>Нажатие форматирует текст текущего файла, расставляет отступы. Нужна, если вы хотите разобраться в чужом коде, плохо отформатированном или сжатом.</dd>
|
||||
<dt>Консоль <span class="devtools" style="background-position:-70px 94px"></span></dt>
|
||||
<dd>Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускайть функции. Её нажатие можно заменить на клавишу <code class="key">Esc</code>.</dd>
|
||||
<dt>Окно <span class="devtools" style="background-position:-6px 70px"></span></dt>
|
||||
<dd>Если код очень большой, то можно вынести инструменты разработки вбок или в отдельное окно, зажав эту кнопку и выбрав соответствующий вариант из списка.</dd>
|
||||
</dl>
|
||||
|
||||
Формат <span class="devtools" style="background-position:-264px 94px"></span>
|
||||
: Нажатие форматирует текст текущего файла, расставляет отступы. Нужна, если вы хотите разобраться в чужом коде, плохо отформатированном или сжатом.
|
||||
|
||||
Консоль <span class="devtools" style="background-position:-70px 94px"></span>
|
||||
: Очень полезная кнопка, открывает тут же консоль для запуска команд. Можно смотреть код и тут же запускайть функции. Её нажатие можно заменить на клавишу <code class="key">Esc</code>.
|
||||
|
||||
Окно <span class="devtools" style="background-position:-6px 70px"></span>
|
||||
: Если код очень большой, то можно вынести инструменты разработки вбок или в отдельное окно, зажав эту кнопку и выбрав соответствующий вариант из списка.
|
||||
|
||||
## Точки остановки
|
||||
|
||||
|
|
@ -52,70 +51,60 @@
|
|||
|
||||
Выглядет это должно примерно так:
|
||||
|
||||
<img src="chrome_sources_breakpoint.png">
|
||||
|
||||
|
||||
Слово *Брейкпойнт* (breakpoint) -- часто используемый английский жаргонизм. Это то место в коде, где отладчик будет *автоматически* останавливать выполнение JavaScript, как только оно до него дойдёт.
|
||||
|
||||
|
||||
**В остановленном коде можно посмотреть текущие значения переменных, выполнять команды и т.п., в общем -- отлаживать его.**
|
||||
|
||||
Вы можете видеть, что информация о точке остановки появилась справа, в подвкладке Breakpoints.
|
||||
Вы можете видеть, что информация о точке остановки появилась справа, в подвкладке Breakpoints.
|
||||
|
||||
Вкладка Breakpoints очень удобна, когда код большой, она позволяет:
|
||||
|
||||
<ul>
|
||||
<li>Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.</li>
|
||||
<li>Временно выключить брейкпойнт кликом на чекбокс.</li>
|
||||
<li>Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.</li>
|
||||
</ul>
|
||||
- Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.
|
||||
- Временно выключить брейкпойнт кликом на чекбокс.
|
||||
- Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.
|
||||
|
||||
[smart header="Дополнительные возможности"]
|
||||
<ul>
|
||||
<li>Остановку можно инициировать и напрямую из кода скрипта, командой `debugger`:
|
||||
````smart header="Дополнительные возможности"
|
||||
- Остановку можно инициировать и напрямую из кода скрипта, командой `debugger`:
|
||||
|
||||
```js
|
||||
function pow(x, n) {
|
||||
...
|
||||
debugger; // <-- отладчик остановится тут
|
||||
...
|
||||
}
|
||||
```
|
||||
```js
|
||||
function pow(x, n) {
|
||||
...
|
||||
debugger; // <-- отладчик остановится тут
|
||||
...
|
||||
}
|
||||
```
|
||||
- *Правый клик* на номер строки `pow.js` позволит создать условную точку остановки (conditional breakpoint), т.е. задать условие, при котором точка остановки сработает.
|
||||
|
||||
</li>
|
||||
<li>*Правый клик* на номер строки `pow.js` позволит создать условную точку остановки (conditional breakpoint), т.е. задать условие, при котором точка остановки сработает.
|
||||
|
||||
Это удобно, если остановка нужна только при определённом значении переменной или параметра функции.
|
||||
</li>
|
||||
</ul>
|
||||
[/smart]
|
||||
Это удобно, если остановка нужна только при определённом значении переменной или параметра функции.
|
||||
````
|
||||
|
||||
## Остановиться и осмотреться
|
||||
|
||||
Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать отладчик JavaScript -- перезагрузить её. Итак, нажимаем [key F5] (Windows, Linux) или [key Cmd+R] (Mac).
|
||||
Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать отладчик JavaScript -- перезагрузить её. Итак, нажимаем `key:F5` (Windows, Linux) или `key:Cmd+R` (Mac).
|
||||
|
||||
Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6й строке.
|
||||
|
||||
<img src="chrome_sources_break.png">
|
||||
|
||||
|
||||
Обратите внимание на информационные вкладки справа (отмечены стрелками).
|
||||
Обратите внимание на информационные вкладки справа (отмечены стрелками).
|
||||
|
||||
В них мы можем посмотреть текущее состояние:
|
||||
<ol>
|
||||
<li>**`Watch Expressions` -- показывает текущие значения любых выражений.**
|
||||
|
||||
Можно раскрыть эту вкладку, нажать мышью `+` на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.</li>
|
||||
<li>**`Call Stack` -- стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.**
|
||||
1. **`Watch Expressions` -- показывает текущие значения любых выражений.**
|
||||
|
||||
На текущий момент видно, отладчик находится в функции `pow` (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).</li>
|
||||
<li>**`Scope Variables` -- переменные.**
|
||||
Можно раскрыть эту вкладку, нажать мышью `+` на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.
|
||||
2. **`Call Stack` -- стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.**
|
||||
|
||||
На текущий момент строка 6 ещё не выполнилась, поэтому `result` равен `undefined`.
|
||||
На текущий момент видно, отладчик находится в функции `pow` (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 13).
|
||||
3. **`Scope Variables` -- переменные.**
|
||||
|
||||
В `Local` показываются переменные функции: объявленные через `var` и параметры. Вы также можете там видеть ключевое слово `this`, если вы не знаете, что это такое -- ничего страшного, мы это обсудим позже, в следующих главах учебника.
|
||||
На текущий момент строка 6 ещё не выполнилась, поэтому `result` равен `undefined`.
|
||||
|
||||
В `Global` -- глобальные переменные и функции.
|
||||
</li>
|
||||
</ol>
|
||||
В `Local` показываются переменные функции: объявленные через `var` и параметры. Вы также можете там видеть ключевое слово `this`, если вы не знаете, что это такое -- ничего страшного, мы это обсудим позже, в следующих главах учебника.
|
||||
|
||||
В `Global` -- глобальные переменные и функции.
|
||||
|
||||
## Управление выполнением
|
||||
|
||||
|
|
@ -123,67 +112,61 @@ function pow(x, n) {
|
|||
|
||||
Обратим внимание на панель управления справа-сверху, в ней есть 6 кнопок:
|
||||
|
||||
<dl>
|
||||
<dt><img style="vertical-align:middle" src="manage1.png"> -- продолжить выполнение, горячая клавиша [key F8].</dt>
|
||||
<dd>Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек остановки, то в отладчик управление больше не вернётся.
|
||||
 -- продолжить выполнение, горячая клавиша `key:F8`.
|
||||
: Продолжает выполнения скрипта с текущего момента в обычном режиме. Если скрипт не встретит новых точек остановки, то в отладчик управление больше не вернётся.
|
||||
|
||||
Нажмите на эту кнопку.
|
||||
Нажмите на эту кнопку.
|
||||
|
||||
Скрипт продолжится, далее, в 6й строке находится рекурсивный вызов функции `pow`, т.е. управление перейдёт в неё опять (с другими аргументами) и сработает точка остановки, вновь включая отладчик.
|
||||
Скрипт продолжится, далее, в 6й строке находится рекурсивный вызов функции `pow`, т.е. управление перейдёт в неё опять (с другими аргументами) и сработает точка остановки, вновь включая отладчик.
|
||||
|
||||
При этом вы увидите, что выполнение стоит на той же строке, но в `Call Stack` появился новый вызов.
|
||||
При этом вы увидите, что выполнение стоит на той же строке, но в `Call Stack` появился новый вызов.
|
||||
|
||||
Походите по стеку вверх-вниз -- вы увидите, что действительно аргументы разные.
|
||||
</dd>
|
||||
<dt><img style="vertical-align:middle" src="manage2.png"> -- сделать шаг, не заходя внутрь функции, горячая клавиша [key F10].</dt>
|
||||
<dd>Выполняет одну команду скрипта. Если в ней есть вызов функции -- то отладчик обходит его стороной, т.е. не переходит на код внутри.
|
||||
Походите по стеку вверх-вниз -- вы увидите, что действительно аргументы разные.
|
||||
|
||||
Эта кнопка очень удобна, если в текущей строке вызывается функция JS-фреймворка или какая-то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.
|
||||
 -- сделать шаг, не заходя внутрь функции, горячая клавиша `key:F10`.
|
||||
: Выполняет одну команду скрипта. Если в ней есть вызов функции -- то отладчик обходит его стороной, т.е. не переходит на код внутри.
|
||||
|
||||
Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова `pow`, так как внутри `pow` находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда.
|
||||
</dd>
|
||||
<dt><img style="vertical-align:middle" src="manage3.png"> -- сделать шаг, горячая клавиша [key F11].</dt>
|
||||
<dd>Выполняет одну команду скрипта и переходит к следующей. Если есть вложенный вызов, то заходит внутрь функции.
|
||||
Эта кнопка очень удобна, если в текущей строке вызывается функция JS-фреймворка или какая-то другая, которая нас ну совсем не интересует. Тогда выполнение продолжится дальше, без захода в эту функцию, что нам и нужно.
|
||||
|
||||
Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.
|
||||
</dd>
|
||||
<dt><img style="vertical-align:middle" src="manage4.png"> -- выполнять до выхода из текущей функции, горячая клавиша [key Shift+F11].</dt>
|
||||
<dd>Выполняет команды до завершения текущей функции.
|
||||
Обратим внимание, в данном случае эта кнопка при нажатии всё-таки перейдёт внутрь вложенного вызова `pow`, так как внутри `pow` находится брейкпойнт, а на включённых брейкпойнтах отладчик останавливается всегда.
|
||||
|
||||
Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен -- чтобы быстро из него выйти.
|
||||
</dd>
|
||||
<dt><img style="vertical-align:middle" src="manage5.png"> -- отключить/включить все точки остановки.</dt>
|
||||
<dd>Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.
|
||||
</dd>
|
||||
<dt><img style="vertical-align:middle" src="manage6.png"> -- включить/отключить автоматическую остановку при ошибке.</dt>
|
||||
<dd>Эта кнопка -- одна из самых важных.
|
||||
 -- сделать шаг, горячая клавиша `key:F11`.
|
||||
: Выполняет одну команду скрипта и переходит к следующей. Если есть вложенный вызов, то заходит внутрь функции.
|
||||
|
||||
Нажмите её несколько раз. В старых версиях Chrome у неё три режима -- нужен фиолетовый, в новых -- два, тогда достаточно синего.
|
||||
Эта кнопка позволяет подробнейшим образом пройтись по очереди по командам скрипта.
|
||||
|
||||
Когда она включена, то при ошибке в коде он автоматически остановится и мы сможем посмотреть в отладчике текущие значения переменных, при желании выполнить команды и выяснить, как так получилось.
|
||||
</dd>
|
||||
</dl>
|
||||
 -- выполнять до выхода из текущей функции, горячая клавиша `key:Shift+F11`.
|
||||
: Выполняет команды до завершения текущей функции.
|
||||
|
||||
Эта кнопка очень удобна в случае, если мы нечаянно вошли во вложенный вызов, который нам не интересен -- чтобы быстро из него выйти.
|
||||
|
||||
 -- отключить/включить все точки остановки.
|
||||
: Эта кнопка никак не двигает нас по коду, она позволяет временно отключить все точки остановки в файле.
|
||||
|
||||
 -- включить/отключить автоматическую остановку при ошибке.
|
||||
: Эта кнопка -- одна из самых важных.
|
||||
|
||||
Нажмите её несколько раз. В старых версиях Chrome у неё три режима -- нужен фиолетовый, в новых -- два, тогда достаточно синего.
|
||||
|
||||
Когда она включена, то при ошибке в коде он автоматически остановится и мы сможем посмотреть в отладчике текущие значения переменных, при желании выполнить команды и выяснить, как так получилось.
|
||||
|
||||
**Процесс отладки заключается в том, что мы останавливаем скрипт, смотрим, что с переменными, переходим дальше и ищем, где поведение отклоняется от правильного.**
|
||||
|
||||
[smart header="Continue to here"]
|
||||
```smart header="Continue to here"
|
||||
Правый клик на номер строки открывает контекстное меню, в котором можно запустить выполнение кода до неё (Continue to here). Это удобно, когда хочется сразу прыгнуть вперёд и breakpoint неохота ставить.
|
||||
[/smart]
|
||||
|
||||
|
||||
```
|
||||
|
||||
## Консоль
|
||||
|
||||
При отладке, кроме просмотра переменных и передвижения по скрипту, бывает полезно запускать команды JavaScript. Для этого нужна консоль.
|
||||
|
||||
В неё можно перейти, нажав кнопку "Console" вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку <span class="devtools" style="background-position:-72px -28px"></span> или клавишей [key ESC].
|
||||
В неё можно перейти, нажав кнопку "Console" вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку <span class="devtools" style="background-position:-72px -28px"></span> или клавишей `key:ESC`.
|
||||
|
||||
**Самая любимая команда разработчиков: `console.log(...)`.**
|
||||
|
||||
Она пишет переданные ей аргументы в консоль, например:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
```js run
|
||||
// результат будет виден в консоли
|
||||
for (var i = 0; i < 5; i++) {
|
||||
console.log("значение", i);
|
||||
|
|
@ -198,12 +181,12 @@ for (var i = 0; i < 5; i++) {
|
|||
|
||||
Ошибки JavaScript выводятся в консоли.
|
||||
|
||||
Например, прервите отладку -- для этого достаточно закрыть инструменты разрабтчика -- и откройте [страницу с ошибкой](error/index.html).
|
||||
Например, прервите отладку -- для этого достаточно закрыть инструменты разрабтчика -- и откройте [страницу с ошибкой](error/index.html).
|
||||
|
||||
Перейдите во вкладку Console инструментов разработчика ([key Ctrl+Shift+J] / [key Cmd+Shift+J]).
|
||||
Перейдите во вкладку Console инструментов разработчика (`key:Ctrl+Shift+J` / `key:Cmd+Shift+J`).
|
||||
|
||||
В консоли вы увидите что-то подобное:
|
||||
<img src="console_error.png">
|
||||
|
||||
|
||||
Красная строка -- это сообщение об ошибке.
|
||||
|
||||
|
|
@ -214,46 +197,32 @@ for (var i = 0; i < 5; i++) {
|
|||
Более подробно прояснить произошедшее нам поможет отладчик. Он может "заморозить" выполнение скрипта на момент ошибки и дать нам возможность посмотреть значения переменных и стека на тот момент.
|
||||
|
||||
Для этого:
|
||||
<ol>
|
||||
<li>Перейдите на вкладку Sources.</li>
|
||||
<li>Включите остановку при ошибке, кликнув на кнопку <img style="vertical-align:middle" src="manage6.png"></li>
|
||||
<li>Перезагрузите страницу.</li>
|
||||
</ol>
|
||||
|
||||
1. Перейдите на вкладку Sources.
|
||||
2. Включите остановку при ошибке, кликнув на кнопку 
|
||||
3. Перезагрузите страницу.
|
||||
|
||||
После перезагрузки страницы JavaScript-код запустится снова и отладчик остановит выполнение на строке с ошибкой:
|
||||
|
||||
<img src="chrome_break_error.png">
|
||||
|
||||
|
||||
Можно посмотреть значения переменных. Открыть консоль и попробовать запустить что-то в ней. Поставить брейкпойнты раньше по коду и посмотреть, что привело к такой печальной картине, и так далее.
|
||||
|
||||
|
||||
## Итого
|
||||
|
||||
Отладчик позволяет:
|
||||
<ul>
|
||||
<li>Останавливаться на отмеченном месте (breakpoint) или по команде `debugger`.</li>
|
||||
<li>Выполнять код -- по одной строке или до определённого места.</li>
|
||||
<li>Смотреть переменные, выполнять команды в консоли и т.п.</li>
|
||||
</ul>
|
||||
|
||||
В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом.
|
||||
- Останавливаться на отмеченном месте (breakpoint) или по команде `debugger`.
|
||||
- Выполнять код -- по одной строке или до определённого места.
|
||||
- Смотреть переменные, выполнять команды в консоли и т.п.
|
||||
|
||||
Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements -- позволяет работать со страницей (понадобится позже), Timeline -- смотреть, что именно делает браузер и сколько это у него занимает и т.п.
|
||||
В этой главе кратко описаны возможности отладчика Google Chrome, относящиеся именно к работе с кодом.
|
||||
|
||||
Пока что это всё, что нам надо, но, конечно, инструменты разработчика умеют много чего ещё. В частности, вкладка Elements -- позволяет работать со страницей (понадобится позже), Timeline -- смотреть, что именно делает браузер и сколько это у него занимает и т.п.
|
||||
|
||||
Осваивать можно двумя путями:
|
||||
<ol>
|
||||
<li>[Официальная документация](https://developer.chrome.com/devtools) (на англ.)</li>
|
||||
<li>Кликать в разных местах и смотреть, что получается. Не забывать о клике правой кнопкой мыши.</li>
|
||||
</ol>
|
||||
|
||||
1. [Официальная документация](https://developer.chrome.com/devtools) (на англ.)
|
||||
2. Кликать в разных местах и смотреть, что получается. Не забывать о клике правой кнопкой мыши.
|
||||
|
||||
Мы ещё вернёмся к отладчику позже, когда будем работать с HTML.
|
||||
[head]
|
||||
<style>
|
||||
span.devtools {
|
||||
display: inline-block;
|
||||
background-image: url(/article/debugging-chrome/statusbarButtonGlyphs.svg);
|
||||
height:16px;
|
||||
width:16px;
|
||||
}
|
||||
</style>
|
||||
[/head]
|
||||
Loading…
Add table
Add a link
Reference in a new issue