Отладка и тестирование JavaScript в приложениях HTML5. Подробный гайд по отладке кода на JavaScript в Chrome Devtools

В IDE NetBeans 7.3 представлен новый тип проектов, который можно использовать для разработки приложений HTML5. Приложения HTML5 обычно сочетают HTML, CSS и JavaScript для создания приложений, которые запускаются в браузерах и которые отображаются на различных устройствах, включая смартфоны, планшеты и ноутбуки. В настоящем документе показано, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.

Если необходимо выполнять отладку файлов JavaScript в приложении HTML5, рекомендуется установить расширение NetBeans Connector для браузера Chrome. Поддержка отладки включается автоматически при запуске приложения в браузере и установке расширения.

IDE также позволяет легко настроить и запускать тестирование модулей для файлов JavaScript с помощью платформы тестирования Jasmine и сервера JS Test Driver. Можно настроить запуск JS Test Driver для различных модулей для разнообразных браузеров и быстро указать библиотеки, сценарии и тесты JavaScript, которые должны загружаться в IDE при запуске тестов. В случае ошибки теста можно воспользоваться отладчиком для поиска кода с ошибкой.

Подробнее об установке расширения NetBeans Connector для браузера Chrome см. в учебном курсе .

Обзор функций редактирований JavaScript в IDE см. в разделе Редактирование JavaScript в IDE NetBeans. .

Для просмотра демонстрационного ролика этого учебного курса см. раздел Видеоролик по тестированию и отладке JavaScript в приложениях HTML5 .

Для выполнения этого учебного курса потребуются следующие материалы.

Примечания.

• В этом документе используется сервер JS Test Driverдля запуска тестов модулей JavaScript. Рекомендуется ознакомиться со свойствами сервера в разделе Домашняя страница проекта драйвера JS Test .
• Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.

Создание образца приложения HTML5

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

Когда вы запустите проект с помощью кнопки "Выполнить", первая страница приложения HTML5 откроется в браузере Chrome и там отобразится список мобильных телефонов. При нажатии на имя мобильного телефона на странице отображаются сведения о телефоне.

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка "Отмена" разрывается соединение между IDE и браузером. При разрыве соединения необходимо повторно запустить приложение HTML5 из IDE для использования отладчика JavaScript.

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

Использование отладчика JavaScript

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

Разверните узел js в окне "Проекты" и дважды щелкните файл controllers.js , чтобы открыть файл в редакторе.

Поместите точку останова строки на 16 строке в controllers.js , щелкнув левую границу.

Для просмотра точек останова, заданных в проекте, выберите "Окно" > "Отладка" > "Точки останова", чтобы открыть окно точек останова.

Нажмите кнопку "Выполнить" на панели инструментов, чтобы повторно запустить проект.

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

В браузере нажмите на одну из записей на странице, например Motorola Atrix4G.

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

В редакторе IDE вы можете видеть, что точка останова была достигнута и что счетчик программы находится в настоящее время в строке 16 файла controllers.js .

Подведите курсор к переменной phone для просмотра подсказки с информацией о переменной.

В подсказке отображается следующая информация: phone = (Resource) Resource .

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

Например, при расширении узла android отображаются значения строк os и ui .

Также можно выбрать "Окно" > "Отладка" > "Переменные" для просмотра списка в окне "Переменные".

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

Выполнение тестов JS Unit

IDE позволяет легко настраивать сервер JS Test Driver для выполнения тестов модулей. В этом учебном курсе вы будете использовать тесты модулей JavaScript, входящие в состав образца проекта, и использовать платформу тестирования Jasmine.

JS Test Driver представляет собой сервер, предоставляющий адрес URL, который является целевым для запуска тестов модулей JavaScript. При запуске тестов сервер запускается и ожидает выполнения тестов. В окне браузера отобразится зеленое сообщение о состоянии, которое подтверждает, что сервер работает и находится в режиме ожидания. IDE обеспечивает диалоговое окно конфигурации для JS Test Driver, которое можно открыть из узла JS Test Driver в "Службы". Диалоговое окно конфигурации позволяет легко указать местоположение JAR сервера JS Test Driver и браузеры, в которых следует запускать браузеры. Узел JS Test Driver позволяет быстро определить, запущен ли сервер, а также запустить или остановить сервер.

Подробнее о настройке сервера JS Test Driver см. в документации Начало работы с JsTestDriver .

Загрузите JAR JS Test Driver и сохраните файл JAR в локальной системе.

В окне "Службы" щелкните правой кнопкой мыши узел JS Test Driver и выберите "Настройка".

В диалоговом окне "Настроить" щелкните "Обзор" и найдите загруженный файл JAR JS Test Driver.

Выберите Chrome с помощью функции отладчика JS Debugger NetBeans. Нажмите кнопку ОК.

Примечание. Местоположение файла JAR для JS Test Driver нужно указывать только при первой настройке JS Test Driver.

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

Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "New > Other"(Создать > Другое).

Выберите Файл конфигурации jsTestDriver в категории "Тестирование модулей". Нажмите кнопку "Далее".

Убедитесь, что jsTestDriver задан как "Имя файла".

В поле "Созданный файл" убедитесь, что файл находится в папке config проекта (AngularJSPhoneCat/config/jsTestDriver.conf).

Примечание. Файлом конфигурации jsTestDriver.conf должна быть папка config проекта. Если местоположением созданного файла не явлется папка config , нажмите "Обзор" и выберите папку AngularJSPhoneCat - Файлы конфигурации в диалоговом окне.

Убедитесь, что установлен флажок для загрузки библиотек Jasmine. Нажмите кнопку "Готово".

Примечание. Для запуска jsTestDriver необходимо загрузить библиотеки Jasmine. Если вы получаете уведомление о том, что IDE не удается загрузить библиотеки Jasmine, проверьте настройки прокси IDE в окне "Параметры".

После нажатия кнопки "Готово" среда IDE создаст файл конфигурации схемы jsTestDriver.conf и откроет файл в редакторе. В окне "Проекты" отобразится, что файл конфигурации был создан в узле "Файлы конфигурации". Если развернуть папку lib в узле "Тесты модулей", то будет видно, что к проекту были добавлены библиотеки Jasmine.

В редакторе можно увидеть следующее содержимое файла конфигурации, которое создается по умолчанию:

Server: http://localhost:42442 load: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js exclude:

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

Папка модулей проекта "Учебный курс по телефонному справочнику AngularJS" содержит четыре файла JavaScript с тестами модулей.

Чтобы запустить тесты модулей, также можно добавить местоположение файлов JavaScript, которые необходимо протестировать, и библиотеки Angular JavaScript в список загружаемых файлов.

Добавьте следующие местоположения (выделены полужирным шрифтом) в раздел load файла конфигурации. Сохраните изменения. load: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js - app/lib/angular/angular.js - app/lib/angular/angular-*.js - app/js/*.js - test/lib/angular/angular-mocks.js

Отключите все точки останова, заданные в проекте.

Точки останова можно отключить, сняв флажки для точек останова в окне "Точки останова".

После щелчка "Тестировать IDE" автоматически открывается средство запуска JS Test в браузере Chrome и две вкладки в окне "Выходные данные".

В окне браузера Chrome отображаетс сообщение о запуске сервера jsTestDriver. Отображается сообщение о том, что сервер запущен на localhost:42442 . На вкладке "Сервер js-test-driver" в окне "Выходные данные" отображается состояние сервера.

Примечание. Для выполнения тестов модулей окно браузера должно быть открыто и сервер jsTestDriver должен быть запущен. Можно запустить сервер и открыть окно, щелкнув правой кнопкой мыши узел JS Test Driver в окне "Службы" и выбрав "Пуск".

На вкладке "Выполнение тестирование модулей JS" в "Выходных данных" отображаются выходные данные четырех выполненных тестов. Тесты расположены в файлах controllerSpec.js и filtersSpec.js . (У файлов servicesSpec.js и directivesSpec.js в папке unit отсутствуют тесты.)

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

В окне отображается сообщение, что все тесты прошли успешно.

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

Отладка тестов JS Unit

Это упражнение демонстрирует, как можно использовать IDE для отладки файлов JavaScript при ошибке тестирования модуля.

Разверните папку js в окне "Проекты" и дважды щелкните файл controllers.js , чтобы открыть файл в редакторе.

Измените строку 7 в файле для внесения следующих изменений (выделеныполужирным шрифтом). Сохраните изменения. function PhoneListCtrl($scope, Phone) { $scope.phones = Phone.query(); $scope.orderProp = "name "; }

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

Убедитесь, что сервер JS Test Driver запущен и что сообщение состояния отображается в окне браузера Chrome.

Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Тестирование".

При запуске теста можно увидеть, что в одном из тестов произошла ошибка с сообщением, что значение "name" было обнаружено вместо ожидаемого значения "age".

Откройте вкладку "Выполнение тестов JS unit" в окне "Выходные данные".

Отображается сообщение о том, что orderProp должно быть age в строке 41.

Щелкните ссылку на вкладке "Выполнение тестов модулей JS" для перехода к строке, в которой в тесте произошла ошибка. Файл теста controllersSpec.js открывается в редакторе в строке 41 (выделена полужирным шрифтом) it("should set the default value of orderProp model", function() { expect(scope.orderProp).toBe("age"); });

Видно, что в тесте ожидалось "age" как значение scopeOrder.prop .

Установите точку останова в строке, где в тесте произошла ошибка (строка 41).

Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Тестирование".

При повторном запуске теста счетчик программы достигнет точки останова. При наведении курсора на scopeOrder.prop в подсказке видно, что переменная имеет значение "name" при достижении точки останова.

В качестве альтернативы можно выбрать "Отладка" > "Оценка выражений" в главном меню, чтобы открыть окно "Оценка кода". При вводе выражения scopeOrder.prop в окне и нажатии кнопки "Оценить фрагмент кода" () (Ctrl-Enter) в отладчике отображается значение выражения в окне "Переменные".

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

Заключение

В настоящем учебном курсе демонстрируется, как IDE предоставляет инструменты, которые могут использоваться при отладке и тестировании модулей в файлах JavaScript. Отладка включается автоматически для приложений HTML5 при запуске приложения в браузере Chrome при условии, что расширение NetBeans Connector включено. IDE также позволяет легко настроить и запускать тестирование модулей для файлов JavaScript с помощью платформы тестирования Jasmine и сервера JS Test Driver.

См. также

Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте :

• Начало работы с приложениями HTML5 . Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.
• Работа со страницами стилей CSS в приложениях HTML5 Документ, который демонстрирует, как использовать некоторые из мастеров CSS и окон в IDE и режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.
• Внесение изменений в код JavaScript . В документе описаны основные возможности изменения кода JavaScript, предоставляемые в среде IDE.

Подробнее о запуске тестов модулей с помощью JS Test Driver см. следующую документацию:

• Страница проекта JS Test Driver: http://code.google.com/p/js-test-driver/
• Домашняя страница Jasmine: http://pivotal.github.com/jasmine/
• Введение в JsTestDriver . Введение в использование JsTestDriver с сервером непрерывной интеграции.

Легко потеряться написания кода JavaScript без отладчика.

JavaScript Отладка

Трудно писать код JavaScript без отладчика.

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

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

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

JavaScript Debuggers

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

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

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

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

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

console.log() Метод

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

пример

My First Web Page

a = 5;
b = 6;
c = a + b;
console.log(c);

Установка точек останова

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

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

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

Отладчик Ключевое слово

Отладчик ключевое слово останавливает выполнение JavaScript и вызовы (если таковые имеются) функции отладки.

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

Если отладка не доступна, оператор отладчик не имеет никакого эффекта.

С отладчик включен, этот код перестанет выполняться прежде, чем он выполняет третью строчку.

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

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

В противном случае выполните следующие действия:

Chrome

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

Firefox Firebug

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

Internet Explorer

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

Opera

• Откройте браузер.
• Перейти на веб-странице:
  http://dev.opera.com
• Следуйте инструкциям, как:
  добавить кнопку консоли разработчика на панель инструментов.

Safari Firebug

• Откройте браузер.
• Перейти на веб-странице:
  http://extensions.apple.com
• Следуйте инструкциям, как:
  установить Firebug Lite.

Safari Develop Menu

• Перейти к Safari, Настройки, Дополнительно в главном меню.
• Установите флажок "Включить Показать меню в строке меню Разрабатывать".
• Когда новая опция "Develop" появляется в меню:
  Выберите "Show Error Console".

Общаясь недавно со своими коллегами, я был удивлен тем, что многие ни разу не использовали в своей работе встроенные в браузер отладчик консоли для JavaScript. К сожалению, один из них работает в моей фирме, не буду оглашать его имени.
Для тех из вас, кто пока не знаком с консолью браузера API, и написана эта статья.

Визуальная отладка

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

Консоль API – это объект (console), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug Как отслеживать события

Firefox - Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

Тормозит - вне работы выключать

Рассказываем, как использовать панель 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».

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

  В последние несколько лет благодаря появлению различных библиотек, таких как 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() , что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

  

  Заключение

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