Chrome отладка javascript

Отладка асинхронного JavaScript с помощью Chrome DevTools

Вступление

Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!

Небольшая презентация стека асинхронных вызовов.

Как только вы включите поддержку стека вызовов асинхронных функций в DevTools, вы сможете получить развернутую информацию о состоянии вашего веб приложения в любые моменты времени. Прогуливаться по полному стеку выполнения ваших обработчиков событий, функций setInterval, setTimeout, XMLHttpRequest, promises, requestAnimationFrame, MutationObservers и так далее.

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

Давайте включим поддержку этого функционала и пробежимся по нескольким сценариям.

Включение поддержки асинхронной отладки кода в Chrome Canary

Попробуйте новый функционал, включив его поддержку в Chrome Canary(build 35 и выше). Откройте страницу Sources в Chrome Canary DevTools.

Чекбокс «Async» находится на панели, следующей за панелью стека вызовов(Call Stack) с правой стороны. В зависимости от положения этого чекбокса, возможность отладки асинхронных функций будет включена или выключена(хотя, однажды его включив, скорее всего вы никогда не захотите его выключить).

Перехват отложенных событий и XHR ответов

Вы, возможно, уже видели подобное раньше в Gmail:

Если произойдет ошибка в отсылке запроса(возникнут проблемы на стороне сервера или проблемы с соединением с клиентской стороны), Gmail попробует переслать письмо черзе небольшой промежуток времнеи.

Чтобы продемонстрировать, как стек асинхронных вызовов сможет нам помочь проанализировать отложенные события и XHR ответы, я воосоздала описанную выше ситуацию с примером заглушки Gmail. Весь JavaScript код примера может быть найден по ссылке выше. Алгоритм его работы выглядит следующим образом:

На схеме выше, методы, подсвеченные синим являются главными местами для применения новых возможностей DevTools, так как эти методы выполняются асинхронно.

Если смотреть только в панель стека вызовов(Call Stack) в предыдущих версиях DevTools, точка останова(breakpoint) в функции postOnFail() даст вам лишь немного информации о том, где функция postOnFail() была вызвана. А теперь давайте взглянем на разницу со случаем, когда мы работаем со включенной возможностью отладки асинхронных вызовов:

До	После
Панель стека вызовов без поддержки асинхронных запросов Здесь вы можете увидеть, что вызов функции postOnFail() произошел из возвращаемой фукнции AJAX, но ничего более.	Панель стека вызовов с поддержкой асинхронных запросов Здесь вы можете увидеть, что XHR был вызван из submitHandler(), который был вызван обработчиком события клика, объявленным в scripts.js. Круто!

При использовании стека асинхронных вызовов, мы можем легко просматривать все цепочки вызовов. Например, мы можем определить, был ли вызов метода submitHandler() иницирован так же, как описано выше, или же через retrySubmit() как описано ниже:

Используя панель стека вызовов, вы так же можете сказать, привело ли к точке останова срабатывание события пользовательского интерфейса(например, клик), задержка setTimeout() или работа асинхронной возвращаемой функции.

Наблюдайте за выражениями асинхронно

Когда вы просматриваете ваш стек вызовов, ваши выражения, добавленные к отслеживанию, будут обновляться, чтобы отразить состояние, которое они принимали в указанный момент времени!

Выполняйте код из предыдущих состояний

В дополнение к простому наблюдению за выражениями, вы так же можете взаимодействовать со своим кодом из предыдущих состояний прямо в DevTools JavaScript консоли.

Представьте, будто вы Доктор Кто(Dr. Who) и вам нужна небольшая помощь в сравнении часов, которые у вас были до этого момента в Тардисе(Tardis) и «сейчас». Из консоли DevTools вы можете легко исполнять, сохранять и производить вычисления над значениями из разных точек выполнения.

Использование JavaScript консоли для отладки асинхронного стека вызовов вашего кода.
Пример выше может быть найден здесь

Оставаясь в DevTools для манипуляций с вашими выражениями, вы экономите время, которое бы у вас заняло возвращение предыдущих состояний кода, внесение изменений, и обновление страницы браузера.

На подходе: Отладка цепочек обещаний(promise)

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

Блок-схема JavaScript обещаний

Вот небольшая анимация работы со стеком вызовов в лучшем асинхронном примере от Джейка:

До:

Панель стека вызовов без поддержки асинхронной отладки
Обратите внимание, как мало информации предоставляет панель стека вызовов, когда мы отлаживаем обещания.

После:

Панель стека вызовов с поддержкой асинхронной отладки
Вау, какие обещания! Огромное количество возвращаемых функций.

Примечание:

Поддержка обещаний для стека вызова будет готова очень скоро, как только реализация обещаний перерастет из версии в Blink в финальную версию в V8.

В духе возвращения назад во времени, если вы захотите сегодня посмотреть на асинхронные стеки вызовов для обещаний, вы можете воспользоваться версиями Chrome 33 или Chrome 34. Зайдите в chrome://flags/#enable-devtools-experiments и подключите поддержку эксперементальных DevTools. После перезагрузки Canary, зайдите в настройки DevTools, там появится возможность включить поддержку асинхронных стеков вызовов.

Погружаемся глубже в веб анимации

Давайте пойдем глубже в архивы HTML5Rocks. Помните статью Паула Левиса «Более компактные, производительные и быстрые анимации с помощью requestAnimationFrame»?

Откройте requestAnimationFrame демо и добавьте точку останова в начале метода update()(это где-то 874 строка) файла post.html. Со асинхронным стеком вызовов мы сможем «окунуться глубже» в requestAnimationFrame. И, так же, как и в примере с заглушкой Gmail, у нас появляется возможность пройтись назад к начальному событию(это событие scroll).

До	После

Отслеживаем изменения DOM с помощью MutationObserver

MutationObserver позволяет нам наблюдать за событиями в DOM. Рассмотрим простой пример: когда вы кликаете на кнопку, новый элемент DOM добавляется к блоку .

Добавим новую точку останова в функции nodeAdded() (строка 31) в файле demo.html. С помощью асинхронного стека вызовов, вы можете пройтись по истории вызовов назад через метод addNode() к начальному событию клика.

До	После

Примечания к отладке JavaScript кода с помощью асинхронного стека вызовов

Называйте свои функции

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

Например, возьмите анонимную функцию:

И дайте ей название. Скажем, windowLoaded():

Когда возникнет событие загрузки документа, это будет отражено при выводе стека с помощью DevTools, где вместо мистического названия «(anonymous function)» будет красоваться полное имя функции. Это заметно упростит читабельность истории вызовов, и в большинстве случаев позволит с первого взгляда понять, что там происходит.

До	После

Что дальше

Резюмируя все вышесказанное, все эти асинхронные возвращаемые функции будут отображать полный стек вызовов:

• Таймеры: Возвращают назад до момента инициализации setTimeout() или setInterval()
• XHRы: Возвращают назад до момента, где был вызван xhr.send()
• Анимации: Возвращают назад до момента вызова requestAnimationFrame
• Обработчики событий: Возвращают назад до момента установки обработчика с помощью addEventListener()
• Наблюдатели изменений: Возвращают назад до момента, где было вызвано события изменения

Так же полный стек изменений можно будет посмотреть в ближайшее время для следующих JavaScript API:

• Обещания: Возвращают назад до момента, где обещания было выполнено
• Object.observe: Возвращает назад до момента прикрепления возвращаемой функции

Возможность просмотра всего стека ваших возвращаемых функций должно быть ставит дыбом ваши волосы. Это возможность в DevTools будет особенно полезна, когда несколько асинхронных событий случается в зависимости друг от друга, или когда неперехваченное сообщение об ошибке возникает в одной из ваших асинхронных возвращаемых функций.

Дайте им шанс в Chrome Canary. Если у вас есть что нам сказать по этому поводу, напишите нам в группу Chrome DevTools или присылайте нам баги в наш Chrome DevTools багтрекер.

Подробный гайд по отладке кода на JavaScript в Chrome Devtools

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

Поиск и исправление ошибок может быть затруднительным для новичков. Если думаете, что использовать console.log () для отладки кода лучшее решение, то вы неправы.

В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.

Приводим здесь всего один простой пример использования отладки, но его можно применить к любой задаче.

Шаг 1: Воспроизведите баг

Воспроизведение багов всегда является первым шагом к отладке. Это означает найти последовательность действий, приводящих к ошибке. Процесс может быть долгим, поэтому старайтесь его оптимизировать.

Чтобы самому проделать действия из этого туториала, сделайте следующее:

• Вот веб-страница, с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
• Введите число 5 в поле «Number 1»;
• Введите число 1 в поле «Number 2»;
• Кликните на кнопку «Add»;
• Посмотрите, вам говорят, что 5+1=51;

Упс, очевидно, что это неверно. Результатом должно быть число 6, эту ошибку и нужно исправлять.

Шаг 2: Приостановите выполнение с помощью точки останова

DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:

• Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
• Перейдите к вкладке «Sources»;
• Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
• Поставьте флажок в ячейке «click»;

Вернувшись к странице, снова прибавьте «Number 1» и «Number 2». DevTools приостановит демонстрацию и выделит строку кода на панели «Sources». DevTools выделит эту строку кода:

Почему так происходит?

Когда вы выбираете «click», вы устанавливаете брейкпоинты, зависящие от событий типа click к каждому элементу, который имеет для него обработчик.

Шаг 3: Выполните пошаговую отладку

Одна из распространенных причин, по которой возникают ошибки заключается в том, что скрипт выполняется не в том порядке, как вы думаете. Избежать этой проблемы можно, понаблюдав за исполнением кода строчка за строчкой. Пробуем:

• На панели «Sources» нажмите «Step into next function call button»

Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

• Теперь нажмите кнопку «Step over next function call button»;

Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.

Шаг 4: Выберите другую точку останова

Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:

• Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
• Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
• Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
• Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.

Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.

Шаг 5: Проверьте значения переменных

Распространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.

Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:

• На панели «Sources» выберите вкладку «Watch»;
• Затем нажмите «Add Expression»;
• Введите typeof sum;
• Нажмите enter. DevTools покажет typeof sum: «string». Это значение является результатом Watch Expression.

Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.

Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:

• Если вы не открыли панель с консолью, нажмите Escape, чтобы открыть его. Он открывается в нижней части окна DevTools;
• В консоли введите parseInt (addend1) + parseInt (addend2);
• Нажмите enter. DevTools выводит число 6, что и является ожидаемым результатом.

Шаг 6: Внесите исправления

Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:

• В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
• Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
• Нажмите «Deactivate breakpoints»

Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.

• Нажмите «Resume script execution».

Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!

Возможно вас заинтересуют следующие материалы:

Debugging in Chrome

Before writing more complex code, let’s talk about debugging.

Debugging is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools – a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.

We’ll be using Chrome here, because it has enough features, most other browsers have a similar process.

The “Sources” panel

Your Chrome version may look a little bit different, but it still should be obvious what’s there.

• Open the example page in Chrome.
• Turn on developer tools with F12 (Mac: Cmd + Opt + I ).
• Select the Sources panel.

Here’s what you should see if you are doing it for the first time:

The toggler button opens the tab with files.

Let’s click it and select hello.js in the tree view. Here’s what should show up:

The Sources panel has 3 parts:

1. The File Navigator pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
2. The Code Editor pane shows the source code.
3. The JavaScript Debugging pane is for debugging, we’ll explore it soon.

Now you could click the same toggler again to hide the resources list and give the code some space.

Console

If we press Esc , then a console opens below. We can type commands there and press Enter to execute.

After a statement is executed, its result is shown below.

For example, here 1+2 results in 3 , and hello(«debugger») returns nothing, so the result is undefined :

Breakpoints

Let’s examine what’s going on within the code of the example page. In hello.js , click at line number 4 . Yes, right on the 4 digit, not on the code.

Congratulations! You’ve set a breakpoint. Please also click on the number for line 8 .

It should look like this (blue is where you should click):

A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution.

While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.

We can always find a list of breakpoints in the right panel. That’s useful when we have many breakpoints in various files. It allows us to:

• Quickly jump to the breakpoint in the code (by clicking on it in the right panel).
• Temporarily disable the breakpoint by unchecking it.
• Remove the breakpoint by right-clicking and selecting Remove.
• …And so on.

Right click on the line number allows to create a conditional breakpoint. It only triggers when the given expression is truthy.

That’s handy when we need to stop only for a certain variable value or for certain function parameters.

Debugger command

We can also pause the code by using the debugger command in it, like this:

That’s very convenient when we are in a code editor and don’t want to switch to the browser and look up the script in developer tools to set the breakpoint.

Pause and look around

In our example, hello() is called during the page load, so the easiest way to activate the debugger (after we’ve set the breakpoints) is to reload the page. So let’s press F5 (Windows, Linux) or Cmd + R (Mac).

As the breakpoint is set, the execution pauses at the 4th line:

Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state:

Watch – shows current values for any expressions.

You can click the plus + and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.

Call Stack – shows the nested calls chain.

At the current moment the debugger is inside hello() call, called by a script in index.html (no function there, so it’s called “anonymous”).

If you click on a stack item (e.g. “anonymous”), the debugger jumps to the corresponding code, and all its variables can be examined as well.

Scope – current variables.

Local shows local function variables. You can also see their values highlighted right over the source.

Global has global variables (out of any functions).

There’s also this keyword there that we didn’t study yet, but we’ll do that soon.

Tracing the execution

Now it’s time to trace the script.

There are buttons for it at the top of the right panel. Let’s engage them.

– “Resume”: continue the execution, hotkey F8 .

Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.

Here’s what we can see after a click on it:

The execution has resumed, reached another breakpoint inside say() and paused there. Take a look at the “Call Stack” at the right. It has increased by one more call. We’re inside say() now.

– “Step”: run the next command, hotkey F9 .

Run the next statement. If we click it now, alert will be shown.

Clicking this again and again will step through all script statements one by one.

– “Step over”: run the next command, but don’t go into a function, hotkey F10 .

Similar to the previous the “Step” command, but behaves differently if the next statement is a function call. That is: not a built-in, like alert , but a function of our own.

The “Step” command goes into it and pauses the execution at its first line, while “Step over” executes the nested function call invisibly, skipping the function internals.

The execution is then paused immediately after that function.

That’s good if we’re not interested to see what happens inside the function call.

– “Step into”, hotkey F11 .

That’s similar to “Step”, but behaves differently in case of asynchronous function calls. If you’re only starting to learn JavaScript, then you can ignore the difference, as we don’t have asynchronous calls yet.

For the future, just note that “Step” command ignores async actions, such as setTimeout (scheduled function call), that execute later. The “Step into” goes into their code, waiting for them if necessary. See DevTools manual for more details.

– “Step out”: continue the execution till the end of the current function, hotkey Shift + F11 .

Continue the execution and stop it at the very last line of the current function. That’s handy when we acc > , but it does not interest us, and we want to continue to its end as soon as possible.

– enable/disable all breakpoints.

That button does not move the execution. Just a mass on/off for breakpoints.

– enable/disable automatic pause in case of an error.

When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what’s the context at that moment.

Right click on a line of code opens the context menu with a great option called “Continue to here”.

That’s handy when we want to move multiple steps forward to the line, but we’re too lazy to set a breakpoint.

Logging

To output something to console from our code, there’s console.log function.

For instance, this outputs values from 0 to 4 to console:

Отладка JavaScript программы в браузере. Инструменты Разработчика

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

В каждом современном браузере есть свои инструменты, и хотя они могут отличаться интерфейсом или некоторыми специфическими возможностями, основной функционал для отладки программы у них схожий. Поэтому понимание процесса отладки в рамках даже одного браузера позволит сформировать общее представление об отладке в других браузерах. Полную документацию по Инструментам Разработчика для браузера Firefox можно найти в документации MDN, а для браузера Chrome (на английском) в документации Chrome DevTools.

Поэтапный процесс отладки программы

Скачать архив с исходным кодом для его отладки можно по этой ссылке. В нём содержится несколько ошибок, которые нужно найти и исправить для корректной работы программы. После запуска страницы index.html в браузере (в этой статье для отладки программы будет использоваться Firefox), на ней отобразится заголовок “Страница с ошибкой в коде JavaScript”. Хотя при корректном выполнении кода, заголовок должен быть “Страница без ошибок. Спасибо!” и ниже должна появиться картинка.

Есть несколько способов открыть на странице Консоль Разработчика:

Клавиатура. Ctrl + Shift + I, кроме

• Internet Explorer. (клавиша — F12)
• Mac OS X. (сочетание клавиш — ⌘ + ⌥ + I )

Настройка и управление (кнопка справа вверху браузера) > Дополнительные инструменты > Инструменты разработчика

Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт “Посмотреть код” (при этом отобразится код того элемента, на котором вы щёлкнули правой кнопкой)

В открывшейся Консоли есть набор вкладок, каждая из которых предоставляет определенный функционал. На начальном этапе достаточно иметь представление о следующих вкладках:

Первой является вкладка Инспектор (или Elements в браузере Chrome), где отображается разметка страницы и стили элементов справа.

Эта панель имеет косвенное отношение к процессу отладки JavaScript, поэтому детально в этой статье разбираться не будет. Подробную информацию по ней лучше изучить в соответствующей документации.

Следующей вкладкой в Инструментах Разработчика является панель Консоль (или Console в браузере Chrome), которая отображает логи работы программы. Например, ошибки, предупреждения, и другую дополнительную информацию, которую генерирует программа JavaScript в ходе своего выполнения. А также эта панель позволяет непосредственно взаимодействовать с кодом JavaScript на странице.

Все возникшие ошибки в JavaScript коде, выводятся в ней с указанием файла и конкретного места в нем, где произошла ошибка.

Также консоль содержит ряд инструментов и настроек для фильтрации выводимых сообщений, очистки консоли и запрета очистки логов при перезагрузке страницы — Непрерывные логи.

В текущем исходном коде используется метод console.log() , который выводит в консоль указанное в скобках сообщение. Таким образом, при корректной работе программы, в консоли должно быть выведено “Успешное начало программы”. Более полную информацию по методам консоли можно прочитать в соответствующей части документации MDN

Третьей вкладкой является панель Отладчик (или Sources в Chrome). Эта панель по сути представляет собой встроенную среду разработки кода, в которой можно получить доступ ко всем подключенным к странице файлам. Можно посмотреть их содержимое, отследить их выполнение, а в Chrome еще можно отредактировать код, скопировать его или сохранить изменения в новом файле.

Также, для отладки кода в этой панели используются точки останова (брейкпоинты), которые позволяют приостановить выполнение кода на определенной строке. Поставить точку останова можно кликнув на номер соответствующей строки или написав в самом коде ключевое слово debugger;

Управлять потоком выполнения программы после остановки на точке можно с помощью кнопок, расположенных справа в верхнем углу консоли. Которые позволяют возобновить выполнение ( F8 ), перешагнуть выполнение до следующей точки останова ( F10 ), зайти в функцию ( F11 ) или выйти из неё ( Shift F11 ). Крайняя кнопка, если её активировать, позволяет приостанавливаться на каждом непойманном исключении.

Воспроизведение и поиск ошибок

Первым шагом отладки является воспроизведение ошибки. В данном случае, ошибка воспроизводится при самом запуске программы, так как на странице не отображается необходимое содержание.

Далее начинается поиск ошибки, перейдя в панель “Консоль” можно увидеть выведенное там сообщение о возникшем в коде исключении.

В этом сообщении еще содержится метка с информацией о файле и номере строки, которая привела к исключению main.js:8:1 . Кликнув на эту метку произойдет переход в этот файл на указанную строку в панели Отладчик.

В данном случае исключение указывает на то, что используемая переменная не была объявлена. Чтобы исправить это, надо заменить в файле main.js строку

После сохранения файла и обновления страницы index.html в браузере, при этом в Консоли должно пропасть сообщение об исключении и вместо него отобразиться сообщение «Успешное начало программы» , которое выводится с помощью метода console.log(«Успешное начало программы»);

Точки останова

Несмотря на исправление строки, вызывающей исключение, содержание страницы не изменилось. Поэтому следующим этапом будет отладка программы с помощью точек останова.

В программе есть функция buggy() , которая должна добавлять картинку и изменять заголовок. Но её выполнению не приводит к нужному результату, хотя никакого больше исключения код не вызывает. Это значит, что скорее все проблема кроется в самой логике этой функции.

Как говорилось выше есть два способа поставить точку останова: кликнув по номере строки в отладчике или написав на нужной строке в коде ключевое слово debugger; .

Воспользуемся первым способом — поставим точку останова на 20-й строке, где вызывается нужная функция. Обновив страницу в браузере, чтобы зайти в эту функцию нужно нажать соответствующую кнопку или клавишу ( F11 ).

При этом в правой части панели в блоке “Области” можно отслеживать значения переменных. В данном случае в переменной param содержится значение «Show» , хотя в этой функции, для изменения содержимого страницы, этот параметр должен начинаться с маленькой буквы. Поэтому, для корректной работы программы, нужно изменить входной параметр в вызове функции на «show»