При написании кода JavaScript вы наверняка будете сталкиваться с ошибками. Для поиска ошибок можно использовать console.log() , выводя в консоль значения каких-либо переменных. Иногда можно использовать для этой цели метод alert(), но очень скоро вы поймете, что в ряде случаев это может быть неудобно.
Вместо переключения между браузером и редактором кода вы можете использовать инструменты разработчика, которые есть в каждом современном браузере. В этой статье мы рассмотрим инструменты разработчика браузера Google Chrome, но аналогичные вы можете найти и в Mozilla Firefox, и в Opera, если они вам больше по душе.
Отладка кода (Debugging, или дебаггинг) в Chrome DevTools
Наверняка вы слышали, что ошибки называют багами. Так вот поиск и устранение ошибок - это дебаггинг, или по-русски отладка кода. Для этой процедуры нам и понадобятся инструменты разработчика в Google Chrome. Для того чтобы их протестировать, мы создадим простой html-файл с именем index.html и подключим к нему файл test.js, размещенный в папке js той же директории.
Подготовка файлов с HTML-разметкой и JavaScript-кодом
Разметка в html-файле будет содержать простую форму с несколькими radio-переключателями и кнопкой, которая будет применять выбранный цвет к тексту.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<body> <div class="wrap small"> <form name="colorForm"> <label><input type="radio" name="color" value="#000" checked> Черный</label> <label><input type="radio" name="color" value="red"> Красный</label> <label><input type="radio" name="color" value="green"> Зеленый</label> <label><input type="radio" name="color" value="#1c74db"> Синий</label> <label><input type="radio" name="color" value="#f90"> Оранжевый</label> <button type="button" class="btn" onclick="changeColor()">Применить</button> </form> <div id="output"> <h2>Some text</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... nobis.</p> <p>Nesciunt debitis voluptate id rem modi reiciendis dolorum ... explicabo magni!</p> <p>Fuga pariatur provident maiores, magnam, dolore impedit ... rerum.</p> </div> <script src="js/test.js"></script> </div> </body> |
Код test.js тоже будет простым:
|
1 2 3 4 5 6 7 8 9 |
function changeColor() { // Получаем цвет из выделенного radio-элемента var radioColor = document.querySelector('input[name="color"]:checked').value; console.log(radioColor); // Получаем доступ к текстовому блоку var output = document.getElementById('output'); // Изменяем цвет текста (атрибут style) для текста output.style.color = radioColor; } |
Обратите внимание, что в js-коде мы обрабатываем событие клика на кнопке. Обработчик события записан в html-коде, как атрибут элемента <button>. Поэтому при отладке мы будем отслеживать именно клик по кнопке.
Пример для тестов вы можете посмотреть и протестировать в новой вкладке.
Точки останова (брейкпойнты)
Вызвать Инструменты разработчика Chrome можно, открыв html-файл в браузере, щелкнув меню в правом верхнем углу и выбрав в нем пункт Дополнительные инструменты> Инструменты разработчика. Также можно просто нажать F12 или Ctrl + Shift + I.
Инструменты разработчика в Chrome
Можно также воспользоваться контекстным меню, выбрав по правому клику на любом из элементов пункт "Просмотреть код".
Думаю, что где находятся Инструменты разработчика в Chrome вы, скорей всего, знаете, т.к. при верстке любой html-страницы вы должны были ими пользоваться. Сейчас нас будет интересовать вкладка Sources (Источники). Слева в этой панели найдите папку js и кликните по имени файла test.js, чтобы отобразить его код.
Поставим первую точку останова (breakpoint) - это та часть/строка нашего кода, где мы хотим, чтобы выполнение было остановлено, чтобы мы могли проверить, что происходит в этот момент в браузере.
Все, что нужно сделать для этого - просто щелкнуть на нужном номере строки. Она при этом подсветится синим цветом в виде утолщенной стрелки.
Для нашего кода первым брейкпойнтом будет 3-я строка, в которой мы определяем value того переключателя, который отметил пользователь перед нажатием кнопки. Код в ней такой:
|
1 |
var radioColor = document.querySelector('input[name="color"]:checked').value; |
После клика на кнопке вы увидите, что браузер "поставил на паузу" выполнение вашего кода (надпись на полупрозрачном фоне "Paused in debugger") с двумя кнопками. В панели Sources на вкладке Local отобразится информация обо всех локальных переменных в нашей функции.
Добавляем и тестируем точку останова
Фактически точка останова действительно остановила выполнение кода при запуске функции. Теперь мы сможем выполнить код построчно, наблюдая изменения, внесенные в наши переменные.
Обратите внимание на правую сторону вкладки Sources:
- В разделе Call Stack были добавлены changeColor и onclick. CallStack содержит список функций, которые были вызваны для выполнения нашего кода до точки останова. Поскольку мы нажали кнопку, было вызвано событие
onclick, которое, в свою очередь, вызвало функциюchangeColor. - В раздел Scope был добавлен раздел Local, который определяет локальные переменную области видимости. В функции у нас есть output, radioColor и this. Ключевое слово
thisприсутствует, поскольку мы запускаем JavaScript в браузере, и он ссылается на объект Window. Обратите внимание, что в этот момент во время выполнения переменныеoutputиradioColorимеют значение undefined (не определены), так как мы еще не присвоили им значения.
Кнопки для управления переходом между строками кода
При отладке кода с использованием точек останова вам, скорей всего, недостаточно будет той информации, которая есть в момент ее срабатывания. Вы наверняка захотите пойти дальше или вернуться назад. Естественно, в Инструментах разработчика Chrome это предусмотрено. Справа вверху вы увидите ряд кнопок.
- Первая кнопка со знаком паузы/воспроизведения 
предназначена для возобновления выполнения кода. Нажатие на нее продолжит выполнение нашего сценария до конца, если у нас не будет другой точки останова. Если же точек останова 2 и более, клик по этой кнопке выполнит код до следующего брейкпойнта. Аналогичная кнопка есть вверху на полупрозрачном оверлее.
- Step Over - кнопка с изогнутой стрелкой и точкой выполняет текущую строку и останавливается на следующей строке. Т.е. вы как бы медленно проходите по строчкам кода.
При повторном нажатии кнопки Step Over мы будем видеть уже другие данные в блоке Scope > Local. Кроме того, рядом со строкой с переменной мы можем видеть ее значение.
Переход к выполнению кода после точки останова
- Step Into - кнопка со стрелкой вниз и точкой внизу предназначена для перехода к следующему вызову функции. То есть, если в текущей строке вызывается определенная функция, вы перейдете в ее код. Например, если в коде присутствует код var test = showInfo(), щелчок по кнопке "Step Into" переведет отладчик в функцию showInfo. Также клики по этой кнопке могут перевести выполнение скрипта на следующую строку.
- Step Out (Выход) - кнопка со стрелкой вверх и точкой внизу предназначена для выхода из текущей функции. В приведенном выше примере с showInfo() щелчок по этой кнопке выведет нас из функции и вернет в место, где она была вызвана.
Вы также можете деактивировать/активировать заново точки останова соответствующей кнопкой.
Пример с пересчетом суммы товаров
Чтобы посмотреть на работу некоторых из этих кнопок разберем другой пример: мы удаляем товары из корзины в виде таблицы и пересчитываем сумму оставшихся товаров в отдельной функции.
HTML-разметка примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<body> <table id="basket"> <thead> <tr> <th>Наименование</th><th>Количество</th> <th>Цена, грн</th><th>Удалить</th> </tr> </thead> <tbody> <tr> <td>Рюкзак школьный Rainbow Girl</td> <td>1</td> <td>269</td> <td><span class="trash"></span></td> </tr> <tr> <td>Пенал Smart Power 4x4</td> <td>1</td> <td>99</td> <td><span class="trash"></span></td> </tr> <tr> <td>Фломастеры BIC Visa 12 цветов</td> <td>1</td> <td>87</td> <td><span class="trash"></span></td> </tr> <tr> <td>Набор шариковых ручек 4 шт BIC</td> <td>1</td> <td>32</td> <td><span class="trash"></span></td> </tr> <tr> <td>Итого</td> <td colspan="2" id="itogo">487</td> <th> </th> </tr> </tbody> </table> <script src="js/count-sum.js"></script> </body> |
Код count-sum.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
let trash = document.querySelectorAll('#basket .trash'), basket = document.getElementById('basket');; trash.forEach(del => del.onclick = function () { if (confirm("Вы уверены?")) this.closest('tr').remove(); showPrice(); }); function showPrice() { let priceTd = basket.querySelectorAll('td:nth-child(3)'); let summa = 0; summa = priceTd.reduce((res, el) => summa += +el.textContent, 0); itogo.textContent = summa; } showPrice(); |
Сам пример можно посмотреть здесь, а проверить работу точек останова лучше в новой вкладке.
С помощью Инструментов разработчика Chrome ставим точку останова на строку 4 с текстом if (confirm("Вы уверены?")) this.closest('tr').remove().
Сделаем клик по кнопке корзины, затем пару кликов по кнопке Step Into и после подтверждения действия в диалоговом окне confirm() попадем в код функции showPrice(). В зависимости от того, в какой функции мы находимся, справа мы видим разные переменные.
Другой способ добавить точки останова
В том случае, если у вас есть много строк кода, объединенного в один файл, установка точки (точек) останова в инструментах Chrome путем нажатия на строку кода может показаться очень сложным процессом.
Однако в Chrome Dev Tools есть отличная функция для добавления точек останова на основе различных событий, которые происходят в браузере. Справа от инструментов разработчика, сразу после раздела точек останова, вы увидите категории для назначения точек останова.
В нашем примере происходит обработка события клика, поэтому отмечаем в категории событий Mouse пункт click и получаем точку останова на той же строке.
Второй вариант - добавить в нужное место в js-коде строку debugger; - и при клике по кнопке корзины вы получите "программную" точку останова в соответствующем месте.
Статьи о точках останова в Chrome DevTool на английском:
Отладка кода в Firefox и Opera
Для того чтобы отладить код в Opera, вам не придется привыкать к новому интерфейсу, т.к с 2013 года Opera перешла на движок Webkit, используемый в браузере Safari, Chromium и всех его производных: Google Chrome, «Яндекс.Браузер» и других, поэтому Инструменты разработчика в ней такие же, как и в Chrome. Разница только в маркировке точки красным, а не синим цветом.
В Mozilla Firefox кнопки выглядят несколько иначе, но все равно очень похоже.
Поэтому, какой браузер вы бы не выбрали, процесс отладки будет примерно одинаковым.
