Отладка и тестирование JavaScript в приложениях HTML5. Современная отладка JavaScript
Представьте себе, что вы работаете над этим невероятным новым веб-приложением, и ваши тестеры попросили вас исправить следующие ошибки:
- “Loading…” сообщение строки состояния не исчезает, когда приложение закончило загружаться.
- Язык по умолчанию - норвежский, даже в английских версиях IE и Firefox.
- Где то в коде образовалась глобальная переменная prop (зло - прим. пер.).
- В DOM-вьювере все элементы почему то имеют атрибут «clone».
Запуск отладчиков
- В Firefox вы должны убедится, что у вам установлено расширение Firebug. Выберите “Инструменты > Firebug > Open Firebug”.
- В Опере 9.5+, выберите “Инструменты > Дополнительно > Средства разработки.”
- В бете IE, выберите “Сервис > Панели > Панели обозревателя > IE Developer Toolbar.”
- В Safari или WebKit, сначала включите меню отладки (1) , затем выберите “Разработать > Показать веб-инспектор”
Ошибка № 1: Сообщение “Загрузка …”
Если вы посмотрите на отлаживаемое приложение, то сначала вы увидите то, что изображено на рисунке 1.рис. 1: начальный вид нашего JavaScript-приложения в Dragonfly и Firebug, соответственно.
Когда вы смотрите на исходный текст в отладчике, обратите внимание на функцию clearLoadingMessage() в самом начале кода. Это неплохое место для контрольной точки.
Как её поставить:
- Щелкните мышью в левом поле на номере строки, чтобы установить контрольную точку на первой строке
- Перезагрузите страницу.
Когда страница будет перезагружена, выполнение скрипта будет остановлено и вы увидите то, что показано на рисунке два.
рис. 2: отладчики остановились в контрольной точке внутри clearLoadingMessage.
Давайте взглянем на код функции. Как нетрудно заметить, в ней обновляются два DOM элемента, а в строке 31 упоминается слово statusbar. Похоже, что getElements("p", {"class":"statusbar"}).innerHTML ищет элемент statusbar в дереве DOM. Как бы нам быстро проверить своё предположение?
Вставьте эту инструкцию в командную строку, чтобы проверить. На рисунке три показаны три скриншота (Dragonfly, Firebug и IE8) после чтения innerHTML или outerHTML элемента, возвращенного командой, которую вы исследуете.
Чтобы проверить сделайте следующее:
- Найдите командную строку:
* В Firebug, переключитесь в закладку “Console”.
* В Dragonfly, просмотрите пониже панели кода JavaScript.
* В IE8, найдите закладку справа «Console». - Вставьте getElements("p", {"class":"statusbar"}).innerHTML в командную строку.
- Нажмите Enter.
рис. 3: вывод результата команды в Dragonfly, Firebug, и IE8, соответственно.
Командная строка - очень полезный инструмент, который позволяет вам быстро проверять маленькие куски кода. Интеграция консоли Firebug очень полезна - если Ваша команда выводит объект, вы получаете очень интеллектуальное представление. Например, если это объект DOM - вы увидите размеченный результат.
Можно использовать консоль, чтобы провести более глубокое исследование. Строка JavaScript, которую мы изучаем, делает следующие три вещи:
- Получает ссылку на элемент statusbar.
- Находит firstChild, другими словами, первый узел в этом параграфе.
- Устанавливает свойство innerText.
getElements("p" , {"class" :"statusbar" }).firstChild.innerText
Сюрприз, на выходе… ничего. Таким образом выражение getElements ("p", {"класс:"statusbar" "}) .firstChild указывает на какой то объекст в DOM, который не содержит никакого текста, или не имеет свойства innerText.
Тогда, следующий вопрос: что на самом деле является первым дочерним элементом у параграфа? Давайте зададим этот вопрос коммандной строке. (См. четвертый рисунок).
рис. 4: командная строка отладчика СтDragonfly, вывод [объект Text].
Вывод отладчика Dragonfly’s - [объект Text] показывает, что это - текстовый узел DOM. Таким образом мы нашли причину первой проблемы. У текстового узла нет свойства innerText, следовательно, установка значения для p.firstChild.innerText ничего не делает. Эта ошибка легко может быть исправлена, если заменить innerText на nodeValue, который является свойством, определенным стандартом W3C для текстовых узлов.
Теперь, после того как мы разобрались с первой ошибкой:
- Нажмите или кнопку Run, чтобы закончить скрипт.
- Не забудьте сбросить поставленную контрольную точку, кликнув по номеру строки еще раз.
Ошибка два: проблема определения языка.
Вы, возможно, обратили внимание на переменную lang;/*language*/ в начале скрипта. Можно предпложить, что код устанавливающий значение этой переменной и вызывает проблему. Можно попробовать найти этот код используя встроенную в отладчики функцию поиска. В Dragonfly поиск находтится прямо над просмотрщиком кода, в Firebug - в правом верхнем углу (см. рисунок 5)Чтобы найти место, где вероятно происходит проблема локализации сделайте следующее:
- Напечатайте lang = в поле поиска.
- Установите контрольную точку на строке, где переменной lang задается значение.
- Перезагрузите страницу.
рис. 5: поиск в Dragonfly и в WebInspector.
Для того, чтобы проверить, что делает эта функция:
- Нажмите кнопку «step into» для входа внутрь функции getLanguage.
- Жмите ее еще и еще, пошагово выполняя код
- В окне просмотра переменных смотрите как меняются их значния.
var str1 = navigator.userAgent.match(/\((.*)\)/);
var ar1 = str1.split(/\s*;\s*/), lang;
for (var i = 0; i < ar1.length; i++){
if (ar1[i].match(/^(.{2})$/)){
lang = ar1[i];
}
}
В процессе пошагового прохождения кода, вы можете использовать окно просмотра локальных переменных. На рисунке 6 показано как это выглядит в Firebug и IE8 DT, массив ar1 мы развернули, чтобы видеть его элементы.
рис. 6: Панель просмотра локальных переменных фукции getLanguage в Firebug IE8’s
Выражение ar1[i].match(/^(.{2})$/) просто ищет строку, состоящую их двух символов, типа «no», «en». Однако как видно на скриншоте у Firefox информация о языке представлена в виде «nn-NO» (2) . IE же и вовсе не помещает в юзер-агента информации о языке.
Таким образом мы нашли вторую ошибку: определение языка производилось путем поиска двухбуквенного кода в строке юзерагента, но Firefox имеет пятисимвольное обозначение языка, а IE не имеет его вовсе. Такой код должен быть переписан и заменен на определение языка либо на стороне сервера с помощью HTTP заголовка Accept-Language, либо получением его из navigator.language (navigator.userLanguage для IE). Вот пример того, какой может быть такая функция
function getLanguage() {
var lang;if (navigator.language) {
lang = navigator.language;
} else if (navigator.userLanguage) {
lang = navigator.userLanguage;
}if (lang && lang.length > 2) {
lang = lang.substring(0, 2);
}return lang;
}
Ошибка три: таинственная переменная «prop»
рис. 7: В панели просмотра переменных Firebug и Dragonfly видна глобальная переменная prop
На рисунке 7 хорошо видно переменную «prop». В хорошо написанных приложениях количество глобальных переменных должно быть минимально, поскольку они могут стать причиной проблем, когда, например две части приложения захотят использовать одну и ту же переменную. Предположим, что завтра другая команда добавит новые возможности в наше приложение и тоже объявит переменную «prop». Мы получим две разные части кода приложения, использующие одно имя для разных вещей. Такая ситуация часто приводит к конфликтам и ошибкам. Можно попробовать найти эту переменную и объявить ее локальной. Для этого можно воспользоваться поиском, как мы делали это в предыдущем случае, но есть и более умный способ…
У отладчиков для многих других языков программирования есть понятие «наблюдателя»(watch), который переходит в режим отладки, когда изменяется заданная переменная. Ни Firebug, ни Dragonfly не поддерживают «наблюдателей» в настоящее время, но мы можем легко эмулировать похожее поведение, добавив следующую строку в начало исследуемого кода:
__defineSetter__("prop" , function () { debugger; });
Сделайте следующее:
- Добавьте отладочный код в начало самого первого скрипта.
- Перезагрузите страницу.
- Отметьте, как прерывается выполнение скрипта.
Когда вы перезагрузите страницу, выполнение кода немедленно остановится там где будет определена переменная «prop». Фактически остановка произодет в том месте, где вы добаили вышеупомянутую строку. Один клик по кнопке «step out» перекинет вас в место установки переменной.
for (prop in attributes) {
if (el.getAttribute(prop) != attributes) includeThisElement = false ;
Нетрудно заметить цикл for в котором объявляется переменная prop без ключевого слова var, т.е. глобальная. Исправить это несложно, просто допишем var и исправим ошибку.
Ошибка четыре: атрибут «clone», которого быть не должно
Четвертая ошибка очевидно была обнаружена продвинутым тестировщиком, использующим DOM инспектор, так как ее существование никак не проявляется в пользовательском интерфейсе приложения. Если и мы откроем DOM инспектор (в Firebug это закладка «HTML», в Dragonfly она называется «DOM»), то увидим что многие элементы имеют атрибут clone, которого быть не должно.рис. 8: Dragonfly’s DOM инспектор показывает проблемный код.
Так как это никак не отражается на пользователях приложения, можно не считать этот баг серьезным, однако не стоит забывать, что он может существенно сказаться на производительности, поскольку скрипт устанавливает атрибут на сотнях и тысячах элементов.
Самый быстрый способ найти эту проблему состоит в том, чтобы установить контрольную точку, которая срабатывает тогда, когда атрибут с названием clone будет установлен для какого-нибудь HTML элемента. Могут ли отладчики сделать это?
JavaScript - очень гибкий язык, и одна из его сильных сторон (или слабых, в зависимости от вашей точки зрения) - это то, что вы можете заменить базовые функции языка своими собственными. Добавьте этот кусок кода на страницу, он переопределит системный метод setAttribute, вызывая остановку кода в момент установки свойства «clone»:
var funcSetAttr = Element.prototype.setAttribute; /* сохраняем ссылку на системный метод */
Element.prototype.setAttribute = function (name, value) {
if (name == "clone" ) {
debugger; /* останавливаем скрипт */
}
funcSetAttr.call(this ,name,value); /* вызываем ранее сохраненный системный метод, чтобы нормальные свойства устанавливались корректно */
};
Итак, делаем следующее:
- Добавьте приведенный код в начало первого скрипта на странице.
- Перезагрузите страницу.
Когда выполнение остановится в контрольной точке, вы захотите узнать где же произошел вызов setAttribute(), то есть вам нужно вернуться на уровень выше в цепочке вызовов функций и посмотреть что происходит там. Для этого вы можете использовать стек вызовов.
рис. 9: Стек вызовов в Dragonfly и IE8.
На рисунке 10 показан стек в Firebug. В строке "setAttribute
рис. 10: Стек вызовов в Firebug. Самая последняя вызванная функция слева.
Кликая по именам функций в стеке вы можете определить каким образом вы оказались в данной точке. Очень важно попробовать это самому, чтобы понять как это работает. Учтите, что когда вы перемещаетесь по стеку, содержимое панели локальных переменных также обновляется, показывая их состояние в момент выполнения выбранной вами функции.
Как использовать стек вызовов, чтобы найти проблемную функцию:
- Нажмите на имя функции в стеке, которую вы хотите видеть.
- Обратите внимние, что локальные переменные обновляются на значения которые они имеют в выбраном контексте.
- Помните, что, если вы используете кнопки пошагового исполнения то они будут перемещать вас с места точки остановки, даже если вы находитесь в другой части стека.
for (var prop in attributes) {
el.setAttribute(prop, attributes);
}
где вы увидите вызов setAttribute. Панель локальных переменных показывает, что значение переменной «prop» действительно «clone». Переменная prop определена в цикле for...in. Это говорит нам о том, что так называется одно из свойств объекта «attributes». Данный объект передается в функцию вторым параметром. Если вы подниметесь по стеку еще на один уровень выше, то увидите следующий код:
var form = makeElement(‘form’, { action:’/login’, method:’post’, name:’loginform’ } , document .body);
Второй параметр метода подсвечен жирным - у этого объекта нет свойства clone. Так откуда же оно взялось?
Давайте еще раз вернемся в функцию makeElement и внимательно посмотрим на переменную attribute и её свойство «clone». Вы можете кликнуть по значению-функции этого свойства для перехода к месту, где оно назначается, оно будет подсвечено голубым цветом
рис. 11: Firebug показывает нам, где было определено свойство clone.
Вот мы и нашли причину четвертой ошибки: метод clone добавляется всем объектам с помощью Object.prototype. Такой подход считается плохой практикой, потому что в циклах for...in объектов будут видны все свойства заданные вами через Object.prototype. Это может приводить к очень трудно уловимым ошибкам.
Чтобы исправить эту ошибку, можно переместить метод clone из прототипа объекта непосредственно в сам объект, после чего заменить все вызовы obj.clone() на Object.clone(obj), как показано в примере:
// ПЛОХО, так делать не стоит
Object.prototype.clone = function () {
var obj = {};
for (var prop in this ) {
obj = this ;
}
return obj;
}
// Код. демонстрирующий использование метода clone():
var myObj1 = { "id" : "1" };
var myObj2 = myObj1.clone();
Сделайте лучше так:
В последние несколько лет благодаря появлению различных библиотек, таких как jQuery и Prototype, JavaScript завоевал лидирующее место среди языков для создания скриптов для веб проектов. Растущая популярность и простота использования привела к появлению полноценных приложений, например, Gmail, которые содержат тысячи строк JavaScript, выдвигающих к команде разработчиков повышенные требования к уровню владения инструментарием.
Результатом увеличения сложности приложений является необходимость в наличии мощных инструментов для отладки, которые позволяют быстро и эффективно найти источник ошибки. Простой вывод значений переменных с помощью функции alert() потерял свою актуальность.
В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.
Консоль - общий взгляд
В большинстве программ для разработчиков самым лучшим другом программиста будет консоль . Многоцелевая панель используется для журналирования сообщений об ошибках, проверки DOM, отладки кода JavaScript и множества других задач. В зависимости от браузера консоль вызывается разными командами (кроме прямого выбора через меню):
- в браузере Chrome и Dragonfly для Opera - Ctrl + Shift + I
- Firebug - F12
Консоль автоматически выводит ошибки в коде, которые выявляются в ходе выполнения скрипта. Файл и строка указываются рядом с ошибкой, а нажатие клавиши мыши на ошибке перемещает фокус ввода в соответствующее ей место.
Данные выводим в консоль
Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().
При разработке кода формы очень полезно знать значения переменных, чтобы проверять правильность работы кода. Обычной практикой является использование функции alert() для визуального контроля. Однако, использование такого метода блокирует выполнение остальной части кода до нажатия кнопки в окне диалога.
Современным решением является использование метода console.log , который выводит значения переменных на панель консоли:
Console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли
Метод можно использовать для вывода вычисленных значений:
Function calcPhotos() { total_photos_diff = total_photos - prev_total_photos; // Выводим значения переменных в консоль console.log(total_photos_diff); }
Преимуществом такого подхода по сравнению с методом использования диалога alert() является то, что выполнение кода не прерывается, и разработчик может несколько раз выводить значения переменных для наблюдения за изменениями данных в реальном времени.
Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Выводим значения в консоль console.log(total_photos_diff); // Обновляем значения t = t*1.3; p = p*1.1; } setInterval(function() { calcPhotos(t,p); },100);
Выделение сообщений
В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.
console.info() : выводит иконку "информация" и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.
console.warn() : выводит иконку "предупреждение" и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.
console.error() : выводит иконку "ошибка" и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.
Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.
Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group() :
// Первая группа console.group("Photo calculation"); console.info("Total difference is now " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Вторая группа console.group("Incrementing variable"); console.log("Total photos is now: " + t); console.log("Prev total photos is now: " + p); console.groupEnd();
Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:
Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug .
Прерывание хода выполнения скрипта
Вывод информации в консоль является полезным средством, но код может выполняться очень быстро и при этом отслеживать много переменных.
Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.
Работаем с точками прерывания
Для установки точки прерывания нужно перейти на закладку "Scripts " и выбрать нужный скрипт из списка. Теперь ищем строку, где нужно прервать ход выполнения скрипта, и жмем на поле с номером строки для активации - появится визуальный индикатор. Теперь перегружаем страницу и выполнение кода прервется в заданной точке:
Когда выполнение прервется, можно поместить курсор мыши над любой переменной и отладчик выведет подсказку со значением в текущий момент.
Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:
На боковой панели можно отслеживать изменение состояния кода, включая динамику локальных и глобальных переменных.
Условные точки прерывания
В процессе отладки кода иногда требуется останавливать выполнение кода только при соблюдении определенных условий. Например, если в вашем скрипте есть цикл, каждая итерация которого совершается за 50 миллисекунд, то будет очень неудобно запускать процесс выполнения после остановки на каждом шаге, когда нам нужна лишь 300 итерация. Для таких случаев есть условные прерывания.
В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.
Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт "Edit Breakpoint" для вывода диалога редактирования условий формирования прерывания.
Установка точки прерывания в коде
Не всегда удобно устанавливать точки прерывания с помощью интерфейса инструмента разработчика в браузере. Иногда проще запустить отладчик из кода специальной командой. В примере, приведённом ниже, показано, как вы можете прервать выполнение кода при соблюдении определенных условий:
If (total_photos_diff > 300) { debugger; // запускаем отладчик и прерываем выполнение кода }
Другие способы прервать выполнение кода
Кроме использования точки прерывания инструмент разработчика предоставляет другие возможности остановить выполнение кода в разных случаях.
Остановка при изменении DOM
Если вам нужно отладить часть кода, которая управляет изменениями DOM, то инструмент разработчика предоставляет в ваше распоряжение способ остановки выполнения кода при изменениях узла DOM.
На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.
Остановка при появлении всех или необрабатываемых исключений
Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки "Pause " в нижней строке интерфейса.
Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:
Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Первая группа console.info("Total difference is now " + total_photos_diff); // Обновляем значения t = t+5; p = p+1; // Необрабатываемое исключение if (total_photos_diff > 300) { throw 0; } // Обрабатываемое исключение if (total_photos_diff > 200) { try { $$("#nonexistent-element").hide(); } catch(e) { console.error(e); } } } setInterval(function() { calcPhotos(t,p); },50);
Введение в стек вызовов
Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.
Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).
Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.
На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues() , что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.
Заключение
Данный урок является отправной точкой для более детального изучения документации по тому инструменту, которым вы планируете активно пользоваться.
Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.
К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере - на первый взгляд.
В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code .
Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.
Предустановки
В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:
У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков . Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:
Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».
Вы можете запустить приложение из-под Node.js (как это делаю я ). Или воспользоваться плагином под Visual Studio Code под названием Live Server .
Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео - Live Server Extension in Visual Studio Code .
Примечание переводчика: видео на английском языке.
С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .
Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью - вы попали по адресу и правильно делаете, что читаете эту статью!
Основы отладки
Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова (breakpoints ) для того, чтобы остановить выполнение программы в определенном месте.
Это дает вам, как разработчику, возможность взглянуть на текущее состояние приложения и проверить, например, значения переменных в нём. Вы даже можете сделать еще больше и отследить любые переменные по своему выбору, чтобы всякий раз, когда приложение останавливается, вы могли проверить значения этих переменных.
После установки точки останова (breakpoint ) в коде, как правило, есть несколько вариантов дальнейших действий:
- продолжить выполнение программы
- пошагово пройтись по всем этапам выполнения программы - строка за строкой
- выйти из текущей функции, в которой вы находитесь
- перейти к выполнению следующей функции
У вас также будет доступ к просмотру стека вызовов (call stack ). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.
Отладка в Google Chrome
Чтобы начать отладку приложения в браузере Google Chrome , добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:
Когда выполнение программы дойдет до строки с оператором debugger , приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.
Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:
Давайте разберемся, что мы видим на вкладке Sources .
Вкладка Sources
Первое, что вы могли заметить на этой вкладке - это копию исходного кода приложения. Это код, который браузер загрузил и с которым он работает.
Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:
Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова .
Точка останова предназначена для обозначения места, на котором нужно остановить выполнение программы. Оператор debugger , который мы использовали в примере выше, функционирует как точка останова , но в исходном коде приложения такая точка останова необязательно должна быть только одной.
Точка останова - преднамеренная остановка или приостановка выполнения программы
Чтобы добавить точку останова , нужно выполнить клик мыши на gutter - поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:
Вкладка Scope
На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local ), глобальная область видимости (Global ) и раздел сценариев (Script ).
В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:
Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log() .
Вкладка Watch
Как уже упоминалось ранее, помимо просмотра переменных на вкладке «Scope», вы также можете определить переменные, значения которых вы хотели бы отслеживать на всем этапе выполнения программы.
Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).
Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput:
Пошаговое выполнение, стек вызовов и список точек останова
Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack ) и т. д.
В стеке вызовов есть только одна функция, которая является обработчиком события для кнопки входа. Функция указана, потому что это единственная функция, которая была вызвана на данный момент. Поскольку одни функции могут вызывать на исполнение другие функции, то эта цепочка будет обновляться соответствующим образом.
Также обратите внимание на кнопки со стрелками в верхней части экрана. Они соответствуют функциям, указанным выше, для продолжения выполнения вашего кода или прохождения по нему по строкам (stepping ). Я бы рекомендовал протестировать немного эти кнопки, чтобы привыкнуть к тому, каким образом можно осуществлять выполнение кода.
Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint ), которая будет срабатывать только при выполнении определенного условия.
Например, предположим, что мы хотим предотвратить обработку события на кнопке входа в систему только тогда, когда пользователь пытается войти в систему без ввода имени пользователя.
Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием - usernameInput.text === "" :
В случае отладки приложения Quick Chat , если вы нажмете кнопку входа в систему без имени пользователя, будет запущена эта точка останова . В противном случае код будет продолжать выполняться как обычно.
Обратите внимание, что существует ещё больше доступных вариантов точек останова , которые не рассматриваются в данной статье.
Отладка в Visual Studio Code
Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.
Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.
Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.
Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome:
Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug ).
Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome - переменные , стек вызовов , точки останова :
Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.
Теперь, когда мы познакомились с вкладкой Debug , нам необходимо создать конфигурацию, которая укажет редактору VS Code, как ему отлаживать наше приложение.
VS Code хранит конфигурацию отладки в файле launch.json внутри папки.vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).
VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки.vscode
Затем из этого списка выберите пункт «Chrome».
Время от времени разработчики совершают ошибки при кодировании. Ошибка в программе или скрипте называется ошибкой.
Процесс поиска и исправления ошибок называется отладкой и является нормальной частью процесса разработки. В этом разделе рассматриваются инструменты и методы, которые могут помочь вам в отладке задач.
Сообщения об ошибках в IE
Самый простой способ отслеживания ошибок - включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.
Двойной щелчок по этому значку приведет вас к диалоговому окну, отображающему информацию о конкретной ошибке.
Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.
Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже -
Сообщения об ошибках в Firefox или Mozilla
Другие браузеры, такие как Firefox, Netscape и Mozilla, отправляют сообщения об ошибках в специальное окно, называемое Консоль JavaScript или Консоль ошибок. Чтобы просмотреть консоль, выберите « Инструменты» → « Консоль ошибок» или «Веб-разработка».
К сожалению, поскольку эти браузеры не дают визуальной информации при возникновении ошибки, вы должны держать консоль открытой и следить за ошибками по мере выполнения вашего скрипта.
Уведомления об ошибках
Уведомления об ошибках, отображаемые в консоли или через диалоговые окна Internet Explorer, являются результатом как синтаксиса, так и ошибок времени выполнения. Эти уведомления об ошибках включают номер строки, в которой произошла ошибка.
Если вы используете Firefox, вы можете нажать на ошибку, доступную в консоли ошибок, чтобы перейти к точной строке в скрипте с ошибкой.
Как отлаживать скрипт
Существуют различные способы отладки вашего JavaScript - Использовать JavaScript Validator
Один из способов проверить код JavaScript для странных ошибок - запустить его через программу, которая проверяет ее, чтобы убедиться, что она действительна и что она соответствует официальным синтаксическим правилам языка. Эти программы называются синтаксическими анализаторами или просто валидаторами для краткости и часто идут с коммерческими редакторами HTML и JavaScript.
Наиболее удобным валидатором для JavaScript является JavaScript Lint Дугласа Крокфорда, который доступен бесплатно в JavaScript Lint Дугласа Крокфорда.
Просто зайдите на эту веб-страницу, вставьте код JavaScript (только JavaScript) в предоставленную текстовую область и нажмите кнопку jslint. Эта программа будет анализировать ваш код JavaScript, гарантируя, что все определения переменных и функций следуют правильному синтаксису. Он также будет проверять инструкции JavaScript, такие как if и while, чтобы они также соответствовали правильному формату
Добавить код отладки в ваши программы
Вы можете использовать методы alert() или document.write() в своей программе для отладки вашего кода. Например, вы можете написать что-то следующее:
var debugging = true; var whichImage = "widget"; if(debugging) alert("Calls swapImage() with argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Exits swapImage() with swapStatus=" + swapStatus);
Изучая содержимое и порядок alert() по мере их появления, вы можете легко проверить работоспособность своей программы.
Как использовать отладчик JavaScript
Отладчик - это приложение, в котором все аспекты выполнения скрипта находятся под контролем программиста. Отладчики обеспечивают мелкомасштабный контроль над состоянием скрипта через интерфейс, который позволяет вам проверять и устанавливать значения, а также контролировать поток выполнения.
Как только сценарий загружен в отладчик, его можно запустить по одной строке за раз или дать указание остановиться на определенных контрольных точках. Когда выполнение остановлено, программист может проверить состояние скрипта и его переменных, чтобы определить, что-то не так. Вы также можете просматривать переменные для изменения их значений.
- Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
- Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
- Напишите модульный код. По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
- Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
- Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
- Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
- Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
- Следите за кавычками. Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
- Следите за своими равными знаками. Вы не должны использовать один = для целей сравнения.
- Явным образом объявляю переменные с помощью ключевого слова var.
Firebug содержит мощный avaScript отладчик, который дает Вам возможность приостановить выполнение в любой момент и просмотреть каждую переменную на этот момент. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.
Находите скрипты с легкостью
Многие веб-вриложения состоят из большого числа файлов, и найти тот, который нужно отлаживать может быть рутинной и скучной задачей. Меню для выбора скриптов в Firebug сортирует и организует файлы в четкий и понятный список, который поможет Вам найти любой файл одним щелчком пальца.
Приостанавливайте выполнение на любой строчке
Firebug позволяет Вам устанавливать брейкпойнты, которые говорят отладчику приостановить выполнение скрипта, когда он дойдет до определенной строки. Пока выполнение приостановлено, Вы можете смотреть значения любых переменных и инспектировать объекты.
Чтобы установить брейкпойнт, кликните на номере любой строки, и там появится красная точка, обозначающая, что брейкпойнт установлен. Кликните на красной точке еще раз, чтобы убрать брейкпойнт.
Приостановить выполнение, только если...
Брейкпойнты могут создать проблемы, если срабатывают слишком часто. Иногда мы хотим приостанавливать выполнение только при выполнении определенных условий. Firebug позволяет Вам устанавливать "условные" брейпкойнты. Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.
Чтобы установить условный брейкпойнт, просто кликните правой кнопкой на любом номере строки. Появится пузырь с приглашением ввести javascript-выражение. Вы можете сделать правый клик еще раз в любое время, чтобы сменить выражение, или левый клик, чтобы избавиться от брейкпойнта.
По одному шагу
Когда отладчик приостановил выполнение, Вы можете продолжать скрипт по одному шагу. Это позволяет Вам четко видеть, как выполнение конкретной строчки влияет на переменные и объекты.
Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки "Run to this Line", чтобы продолжить выполнение до этой строчки.
Я прерываюсь при ошибках
Не всегда Вы выбираете отладчик... Иногда отладчик выбирает Вас.. Firebug дает Вам возможность заходить в отладчик автоматически, когда происходит ошибка, так что Вы можете исследовать условия, при которых возникла проблема.
Развернутый стек
Когда отладчик приостанавливает выполнение, Firebug показывает Вам стек вызова, т.е набор вложенных вызовов функций, которые сейчас запущены и ждут возврата.
Стек вызовов представлен компактной полоской кнопок в панели, каждая - с именем функции в стеке. Вы можете кликнуть любую кнопку, чтобы перепрыгнуть на строку, где функция приостановлена и взглянуть на значения локальных переменных изнутри функции.
Наблюдение за выражениями
Во время отладки, часто хочется видеть значение сложных выражений или объектов, которые закопаны в DOM. Firebug позволяет печатать произвольное javascript-выражение, значение которого будет обновляться на каждом шаге отладчика.
Печатая выражения, не забывайте, что можно использовать клавишу Tab для автодополнения свойств объектов.
Подсказки к переменным
Пока выполнение приостановлено, Вы можете перемещать мышь над любыми переменными текущей функции, просматривая всплывающие подсказки со значениями. Это замечательный способ не отрывать глаз от кода и получать ответы прямо во время чтения.
Профилируйте производительность JavaScript
Ваше веб-приложение почти совершенно. Вы проработали все ошибки, сделан стильный дизайн и пользователям оно нравится. Только одна проблема - некоторые возможности подтормаживают, и Вы не уверены, почему..
С Firebug Вам больше не придется удивляться, почему код работает медленно. Используя профилировщик Firebug, Вы можете отделить мух от котлет буквально за секунды.
Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку "Profile". Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните "Profile" еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.
Логирование вызовов функций
Иногда проблемная функция вызывается так много раз, что Вы не можете каждый раз заходить в отладчик. Вы просто хотите знать, когда она вызвана и с какими параметрами.
Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите "Log calls to "имя функции"". Затем перейдите в консоль и смотрите, как в лог вплывают вызовы...
Перейти прямо на строку 108
Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.