Изучите, как отладить JavaScript с помощью Chrome DevTools. Отладка и тестирование JavaScript в приложениях HTML5

Отладка js и CSS

Изначально эту статью я хотел посвятить только тому, что касается отладки js сценариев. Но после написания, оказалось что, вопрос CSS отладки очень сильно связан с этими же отладчиками, поэтому создавать отдельную статью про CSS отладку просто не имеет смысла.

Javascript сочетает в себе мощность и разнообразие параллельно с примитивной отладкой в браузерах. Постоянно пользоваться функцией alert() - трата драгоценного времени. Поэтому без внешних инструментов отладки выявить ошибку и правильно настроить сценарии у Вас быстро не получится. Сценарии js выполняет браузер, но у самих браузеров инструменты по отладке js скриптов либо отсутствуют, либо настолько примитивные, что ими даже пользоваться не хочется.

CSS отладка - это важная составляющая кросс-браузерности вашего сайта. При верстке дизайна сайта верстальщики тестируют страницы в основных браузерах. Основная цель CSS отладки это одинаковое визуальное отображение страниц сайта во всех основных браузерах.

Под каждый браузер существуют специальные инструменты для отладки js сценариев и одновременно CSS отладки. Эти инструменты - специальные утилиты написанные под конкретный браузер. Поэтому отлаживать свои js скрипты Вам придется только под одним браузером, так как каждый браузер имеет свою утилиту.

Браузер	Инструменты для отладки js сценариев
	Firebug
	Firebug Lite, Dragonfly Opera 9.5 и выше
	Firebug Lite Существует, также, очень мощный инструмент для разработки и отладки MS Visual Studio , но этот инструмент очень притормаживает и может выдавать ошибку в течении 5-7 сек. IE 8 имеет встроенные Developer Tools (для отладки в IE 7 есть режим симуляции)

Самым популярным и удобным инструментом большинство считают Firebug для браузера Firefox. И в практической разработке js сценариев я тоже использую эту утилиту. Из всех представленных выше инструментов Firebug наиболее удобный в использовании и функциональней.

На изображение показана часть консоли Firebug"а.
Вкладка "Консоль " самая важная - на ней построчно отображаются ошибки выявленные во время выполнения js сценариев. В строке отображается причина ошибки, а справа название файла и номер строки. При нажатии на кнопку "Профилировать" она перейдет в нажатое состояние. Если Вы отожмете ее, появится таблица с перечнем функций которые выполняются браузером в реальном режиме. Будет показано названия функций, количество вызовов и время выполнения этих функций за промежуток пока было удержана кнопка "Профилировать ".
Второй по важности можно считать вкладку "Сценарий ". Здесь Вы можете увидеть внутренний код любого выбранного js файла. На вкладке, также доступны такие интересные параметры:

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

Вкладка "Сеть " отображает список загруженных скриптов. Если нажать на любой файл, то будет показана информация про обмен заголовками между браузером и сервером, а также содержимое js скрипта. В строке, также отображается размер и время загрузки скрипта.
Это может быть полезно не только при отладке сценариев, а и для ускорения загрузки страницы. Можно просматривать размеры рисунков, подгружаемых js сценариев и оценивать время затраченное на загрузку каждого элемента страницы. Цветовая гамма загрузки помимо отображения времени на загрузку элемента (страницы), времени DNS запроса и времени HTTP запроса, также показывает время ожидание ответа сервера. Или другими словами, время выполнения кода php.

Кроме всего, Firebug позволяет отслеживать ajax запросы, просматривать заголовки ответов и опять же оценивать время запросов.

Помимо всего Firebug имеет командную строку, которую при желании можно увеличить в окно произвольного размера и в нем вживую писать и сразу выполнять любой js код.
Разработчики Firebug создали специальную версию Firebug Lite, которая позволяет отлаживать js сценарии во всех других основных браузерах (Opera, IE, Safari). Правда эта версия немного урезана, но это все равно лучше чем ничего. Ну, и помимо самой отладки js сценариев, доступны также CSS отладка и структура DOM страницы. Выполнение js событий (onclick, onmousemove и т.д.) позволяет в реальном времени отслеживать изменения в HTML коде страницы и DOM документа. Измененные части html кода мгновенно подсвечиваются.
Если Вы выберите элемент страницы и нажмете на вкладку "Макет", то сможете увидеть как элемент позиционируется на странице, а вкладка "Стиль" отобразит все активные и переопределенные свойства элемента (перечеркнутое свойство).

Свойство переопределяется по последнему установленному значению по приоритетности места его назначения.

Opera Dragonfly

В целом Dragonfly тоже неплохой отладчик, но с первой попытки начать отладку у меня не получилось. При тестовой попытке отладить js сценарий, консоль ошибок почему-то упорно оставалась чистой, хотя в скрипте была допущена синтаксическая ошибка и, принудительно, отображалось окно "Консоль ошибок" с указание строки с ошибкой. Как оказалось, для каждой страницы необходимо было заново перезапускать Dragonfly.

По сути отладка js сценариев в Dragonfly это всего лишь дублирование информации об ошибке в "Консоле ошибок" в консоли самого Dragonfly.

Помимо этого, Dragonfly представляет обширные возможности по CSS отладки страницы. Как по мне, то немного проще для восприятия, чем в Firebug. Помимо позиционирования элемента в странице, Dragonfly предлагает просмотр отдельную вкладку "Рассчитанный стиль" в которой отображается все существующие свойства элемента и вкладку "Стили" со свойствами элемента разбитыми по классам.

Тогда как, Firebug на вкладке "Показать вычисленный стиль" отображает все свойства без цветового оформления. Однако, по сравнению с Firebug, изменение CSS свойств и просмотр изменений в реальном времени в Dragonfly недоступно. Каких-либо особенностей Dragonfly в отличие Firebug по отладке js сценариев нет. Есть также отображение Ajax запросов, заголовки обмена данные между клиентом и сервером, время запроса. Однако указывается лишь полное время запроса без детализации. При работе с Dragonfly складывается впечатление, что он немного притормаживает. Сравнение быстродействия консолей, показало что Dragonfly таки напрягает процессор больше, хоть и незначительно.

К минусам можно отнести то, что для отладки js сценариев не предусмотрено профилирование.

IE Developer Tools

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

К особенностям, которых нет в других отладчиках, можно отнести:
- возможность изменять размер страницы под популярные расширения (1024х768, 1280х768б 1280х1024 и другие);
- при профилировании "Создание/Остановка профилей " названия функций, количество вызовов и время выполнения этих функций за промежуток можно вывести в виде дерева. Что позволяет удобно отследить очередность и вложенность вызовов функций. Firebug позволяет выводить только общий список вызванных функций;
- функция "вид -> источник -> исходный код элемента со стилем" выводит в отдельном окне html код выделенного элемента вместе со всеми это css стилями. Это может быть особенно полезно, если Вам вдруг понадобится взять с другого сайта часть страницы вместе с сss стилями.
К минусам можно отнести то, что в IE Developer Tools отсутствует панель для отслеживания запросов, поэтому отследить количество запросов и скорость загрузки не получится.
Как известно, IE это самый отстающий от спецификаций браузер. При верстке дизайна IE больше всех требует внимания и поиска решений для правильного отображения элементов страницы. Поэтому к большому плюсу IE Developer Tools можно отнести возможность проверять совместимость страницы в IE 7.

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

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

1074

Данная статья будет полезна web разработчикам, которые начинают работать с языком JavaScript и знакомятся с инструментами разработки, встроенными в браузер. Умение «дебажить» JavaScript приложение является очень важным для веб разработчика, поскольку позволяет быстро найти причину ошибки в сценарии.

Отладка в Google Chrome

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

Во всех современных браузерах есть инструменты, позволяющие разработчику анализировать работу веб приложения, в том числе и выполнять отладку JavaScript кода. Для того, чтобы открыть инструменты веб разработчика, в большинстве браузеров используется клавиша F12. В данной статье будет рассмотрена отладка JavaScript приложения на примере инструмента Web Inspector в браузере Google Chrome.

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

< div id ="myDiv"> div >

< script >

Var div = document.getElementById("mydiv" );

var text = "" ;

for ( var i = 0; i < 10; i++)

Text += i + " " ;

Div.innerHTML = text;

< script >

Задача данного сценария - создать ряд цифр от 0 до 9-ти и отобразить их в элементе div на странице. Но код не срабатывает, и мы попробуем найти проблему, выполнив отладку.

Запуск Web Inspector и переключение в окно отладчика.

Нажав на клавишу F12, мы получаем следующее окно в Google Chrome.

Убедитесь в том, что выбран пункт меню Sources, который и позволяет произвести отладку.

Окно отладки делится на три панели (отмечены на изображении цифрами):

1 - Панель файлов, подключенных к текущей странице, в которых есть JavaScript код.

2 - Панель, в которой будет отображаться JavaScript код выбранного файла.

3 - Панель с дополнительными настройками, упрощающими отладку.

Установка точки останова или breakpoint

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

Точка останова (breakpoint ) - метка, которая указывает отладчику, на каком этапе выполнения приложения нужно сделать паузу.

Для начала необходимо выбрать файл, в котором будет выполнятся отладка JavaScript (для этого дважды щелкаем по файлу index.html)

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

Одно из преимуществ отладчика - отображение ошибок, выброшенных интерпретатором. На строке 14 выводится сообщение - Uncaught TypeError: Cannot set property ‘innerHTML’ of null (невозможно установить свойство ‘innerHTML’ для null). Это сообщение уже может помочь в решении проблемы сценария. Сценарий пытается обратиться к свойству на переменной div - сообщение говорит о том, что в этой переменной null и для null нельзя установить значения свойства. Если в переменной null - значит нужно искать код, который записывает в переменную значение.

Пошаговая отладка JavaScript

После установки breakpoint нужно начать отладку. Для этого достаточно обновить страницу (F5). При наличии точки останова сценарий остановился на строке №9 (об этом свидетельствует синяя подсветка строки).

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

отладка JavaScript

Средства отладки не трудно писать программы JavaScript.

Ваш код может содержать синтаксические ошибки, логические ошибки, если нет средств отладки, эти ошибки более трудно найти.

Как правило, если происходит ошибка JavaScript, не будет никаких запросов, так что вы не можете найти код совсем не то место.

средства отладки JavaScript

В поисках ошибки в программном коде называется отладка.

Отладка трудно, но, к счастью, многие браузеры имеют встроенные средства отладки.

Встроенные средства отладки можно запустить или выключить, серьезное сообщение об ошибке будет отправлено пользователю.

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

Браузер с поддержкой отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.

Метод console.log ()

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

примеров

Мой первый веб-страницы

а = 5;
б = 6;
с = а + Ь;
console.log (с);

Установить точку останова

В окне отладки вы можете установить точки останова JavaScript-код.

На каждой точки останова остановит выполнение кода JavaScript, чтобы проверить значение переменных в JavaScript мы.

После того, как проверка будет завершена, вы можете повторно запустить код (например, кнопка Play).

отладчик ключевых слов

отладчик ключевое слово, чтобы остановить выполнение JavaScript, и вызывать функции отладчика.

Это ключевое слово и установить точки останова в инструменте отладки, эффект тот же.

Если нет отладки имеется, отладчик оператор не будет работать.

Открытый отладчик, выполнение кода останавливается перед третьей линии.

Основные средства отладки браузера

Как правило, браузеры позволяют средства отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.

Каждый браузер, выполните следующие действия:

браузер Chrome

• Откройте свой браузер.
• Выберите Инструменты в меню.
• И, наконец, выберите Console.

Firefox браузер

• Откройте свой браузер.
• Перейти на страницу:
  http://www.getfirebug.com.
• Следуйте инструкциям:
  Установить Firebug.

Браузер Internet Explorer.

• Откройте свой браузер.
• Выберите Инструменты в меню.
• Выберите Инструменты Инструменты для разработчиков.
• И, наконец, выберите Console.

опера

• Откройте свой браузер.
• Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
  http://www.opera.com/dragonfly/.

сафари

• Откройте свой браузер.
• Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
• Выберите "Панель управления" в нижней части всплывающего окна.

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

Мы составили список из 14 подсказок для отладки , о которых Вы могли не знать, но которые могут помочь Вам отладить JavaScript код.

Большинство из этих подсказок для Chrome и Firefox, хотя, большинство из них работает и в средствах разработки для других браузеров.

1. ‘debugger;’

После console.log , ‘debugger; ‘ мой любимый быстрый и «грязный» инструмент для отладки. Как только Вы добавляете его в свой код, Chrome автоматически останавливает выполнение кода в этой точке. Вы можете даже обернуть его в условие, чтобы он срабатывал только тогда, когда Вам это необходимо.

If (thisThing) { debugger; }

2. Отображение объектов в виде таблиц

Иногда у Вас есть сложный набор объектов, которые Вы хотите просмотреть. Вы можете использовать console.log для их отображения, а потом пролистывать огромный список, или использовать console.table . Так намного легче понять, с чем Вы имеете дело.

Var animals = [ { animal: "Horse", name: "Henry", age: 43 }, { animal: "Dog", name: "Fred", age: 13 }, { animal: "Cat", name: "Frodo", age: 18 } ]; console.table(animals);

3. Попробуйте посмотреть на разных разрешениях

Было бы потрясающе, если бы на Вашем столе было любое мобильное устройство, однако в реальном мире это невозможно. Как изменить размер окна просмотра? Chrome предоставляет Вам все необходимое. Перейдите в инструменты разработчика, а затем нажмите кнопку «Режим переключения устройства». Посмотрите, как ваши медиа-выражения оживают!

4. Быстрый поиск DOM-элементов

Выберите DOM-элемент на панели элементов, а затем обращайтесь к нему в консоли. Инструменты разработчика в Chrome запоминают последние пять элементов: последний выбранный элемент $0, предпоследний выбранный элемент $1, и т.д.

Если Вы выбирали следующие элементы в порядке ‘item-4’, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’, то Вы можете получить доступ к DOM-элементам, как показано в консоли:

5. Замер времени выполнения кода с помощью console.time() и console.timeEnd()

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

Console.time("Timer1"); var items = ; for(var i = 0; i < 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

Этот код выдаст следующий результат:

6. Получение стек-трейса для функции

Вероятно Вы знаете, что в JavaScript-фреймворках очень много кода.

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

Поскольку JavaScript не является сильно структурированным языком, иногда бывает полезно получить информацию о том, что и когда произошло. В этот момент на сцену выходит console.trace .

Представьте, что Вы хотите увидеть весь стек вызовов для функции funcZ в экземпляре car на 33 строке.

Var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’) } } func1(); var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’); } } func1();

Теперь мы видим, что func1 вызывает func2 , которая вызывает func4 . Func4 создает экземпляр Car , а затем вызывает функцию car.funcX , и т.д.

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

7. Форматирование минифицированного кода

Иногда Вы можете столкнуться с проблемой прямо на продакшене, а ваших сурс-мапов нет на сервере. Ничего страшного . Chrome может отформатировать Ваши JavaScript-файлы, приведя их в более читаемый формат. Конечно, код будет не так информативен, как исходный код, но, по крайней мере, Вы можете понять что в нем происходит. Нажмите кнопку {} « Pretty Print «, расположенную под просмотрщиком кода в инспекторе.

8. Быстрая отладка функции

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

Есть два самых распространенных способа это сделать:

Найти нужную строку в инпекторе и добавить точку останова

Добавить debugger в Ваш скрипт

Оба этих решения требуют поиска нужного файла и нужной строки, которую Вы хотите отладить.

Использование консоли для этой цели, вероятно, менее распространено. Используйте debug(funcName) в консоли, и скрипт приостановит свое выполнение, когда достигнет нужной функции.

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

Var func1 = function() { func2(); }; var Car = function() { this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car();

9. Скрипты, не требующие отладки 10. Найдите важные вещи с помощью более сложных способов отладки

При более сложных сценариях отладки может потребоваться вывести много строк. Одним из способов структурирования выводимых данных является использования различных функций console. Например, console.log, console.debug, console.warn, console.info, console.error, и т.д. Затем Вы можете отфильтровать их в инспекторе. Но иногда это не совсем то, что Вам нужно при отладке. Теперь Вы можете проявить творческий подход, и создавать собственные форматы вывода данных в консоли с помощью CSS.

Console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); } console.todo(“This is something that’ s need to be fixed”); console.important(‘This is an important message’);

11. Отслеживайте вызовы функций и ее аргументы.

В консоли Chrome, Вы можете следить за определенными функциями. Каждый раз, когда функция вызывается, это будет залогировано вместе с параметрами, которые в нее переданы.

Var func1 = function(x, y, z) { //.... };

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

12. Быстрый доступ к элементам в консоли

Более быстрый способ использовать querySelector в консоли — это использовать $. $(‘css-селектор’) — вернет первый подходящий элемент, а $$(‘css-селектор’) — вернет все подходящие элементы. Если Вы используете элемент больше одного раза, можно сохранить его в переменную.

13. Postman великолепен (но Firefox быстрее)

Многие разработчики, используют Postman для тестирования AJAX-запросов.

Иногда, для этих целей проще использовать браузер.

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

Откройте инспектор и перейдите на вкладку «Сеть». Кликните правой кнопкой мыши по интересующему запросу, а затем выберите «Отредактировать» и «Отправить повторно». Теперь Вы можете менять все что угодно: исправить заголовок, отредактировать параметры и нажать «Отправить повторно».

Ниже я привел пример запроса, который был отправлен несколько раз с разными параметрами:

14. Точка останова в момент изменения DOM-элемента

DOM может быть забавным. Иногда, элементы в нем меняются по непонятной для Вас причине. Однако, когда Вам нужно отлаживать JavaScript, Chrome позволяет Вам приостановить выполнение кода, при изменении DOM-элемента. Щелкните правой кнопкой мыши по интересующему элементу в инспекторе, и выберите условие остановки выполнения.

Рассказываем, как использовать панель 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 выделит эту строку кода:
  

  function onClick() {

  function onClick () {

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

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

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

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

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

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

  if (inputsAreEmpty()) {

  if (inputsAreEmpty () ) {

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

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

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

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

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

  • Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:
    

    label.textContent = addend1 + " + " + addend2 + " = " + sum;

    label . textContent = addend1 + " + " + addend2 + " = " + sum ;

  • Слева от этого кода вы увидите номер строки: 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 () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:

  
  Шаг 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».

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