Рассказываем, как использовать панель 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.
- На панели «Sources» выберите вкладку «Watch»;
- Затем нажмите «Add Expression»;
- Введите typeof sum;
- Нажмите enter. DevTools покажет typeof sum: «string». Это значение является результатом Watch Expression.
- В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
- Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
- Нажмите «Deactivate breakpoints»
- Нажмите «Resume script execution».
- “Loading…” сообщение строки состояния не исчезает, когда приложение закончило загружаться.
- Язык по умолчанию - норвежский, даже в английских версиях IE и Firefox.
- Где то в коде образовалась глобальная переменная prop (зло - прим. пер.).
- В DOM-вьювере все элементы почему то имеют атрибут «clone». Запуск отладчиков
- В Firefox вы должны убедится, что у вам установлено расширение Firebug. Выберите “Инструменты > Firebug > Open Firebug”.
- В Опере 9.5+, выберите “Инструменты > Дополнительно > Средства разработки.”
- В бете IE, выберите “Сервис > Панели > Панели обозревателя > IE Developer Toolbar.”
- В Safari или WebKit, сначала включите меню отладки (1) , затем выберите “Разработать > Показать веб-инспектор”
- Щелкните мышью в левом поле на номере строки, чтобы установить контрольную точку на первой строке
- Перезагрузите страницу. Обратите внимание: контрольная точка должна быть установлена на строке с кодом, который выполнится, когда функция будет запущена. Строка, которая содержит clearLoadingMessage(){ не подходит, так как является лишь определением функции. Если вы установите контрольную точку здесь, отладчик на ней не остановится, вместо этого контрольную точку надо устанавливать внутри функции.
- Найдите командную строку:
* В Firebug, переключитесь в закладку “Console”.
* В Dragonfly, просмотрите пониже панели кода JavaScript.
* В IE8, найдите закладку справа «Console». - Вставьте getElements("p", {"class":"statusbar"}).innerHTML в командную строку.
- Нажмите Enter.
- Получает ссылку на элемент statusbar.
- Находит firstChild, другими словами, первый узел в этом параграфе.
- Устанавливает свойство innerText. Давайте попробуем запустить в консоли, что-то большее, чем предыдущая команда. Например вы можете попробовать узнать, какое текущее значение у свойства innerText, перед тем как ему присваивается новое значние. Чтобы узнать это, вы можете напечатать всю команду до знака "=" в командную строку: getElements("p" , {"class" :"statusbar" }).firstChild.innerText
- Нажмите или кнопку Run, чтобы закончить скрипт.
- Не забудьте сбросить поставленную контрольную точку, кликнув по номеру строки еще раз. Ошибка два: проблема определения языка. Вы, возможно, обратили внимание на переменную lang;/*language*/ в начале скрипта. Можно предпложить, что код устанавливающий значение этой переменной и вызывает проблему. Можно попробовать найти этот код используя встроенную в отладчики функцию поиска. В Dragonfly поиск находтится прямо над просмотрщиком кода, в Firebug - в правом верхнем углу (см. рисунок 5)
- Напечатайте lang = в поле поиска.
- Установите контрольную точку на строке, где переменной lang задается значение.
- Перезагрузите страницу. У WebInspector тоже есть очень удобная функция поиска. Она позволяет искать что угодно одновременно и в разметке страницы, и в CSS, и в коде JavaScript. Результаты показывюется на отдельной панели, где вы можете дважды кликнуть по ним, чтобы перейти в нужное место, как показано на скриншоте.
- Нажмите кнопку «step into» для входа внутрь функции getLanguage.
- Жмите ее еще и еще, пошагово выполняя код
- В окне просмотра переменных смотрите как меняются их значния. Войдя в функцию вы увидите попытку прочитать язык из строки юзер-агента браузера, путем анализа navigator.userAgent.
- Добавьте отладочный код в начало самого первого скрипта.
- Перезагрузите страницу.
- Отметьте, как прерывается выполнение скрипта. В IE8 DT имеется закладка «Watch», однако прерывания в момент изменения переменной не происходит. Так что этот пример работает только в Firefox, Opera и Safari.
- Добавьте приведенный код в начало первого скрипта на странице.
- Перезагрузите страницу. После перезагрузки, скрипт начинает обрабатывать DOM-дерево, но сразу же останавливается, как только произойдет установка «плохого» атрибута. (Обратите внимание, что в текущих версиях Firefox, реализация setAttribute различна для разных элементов. Код, приведенный выше работает всегда как надо только в Опере; чтобы получить тот же самый эффект в Firefox, вы можете заменить слово Element на HTMLFormElement, чтобы переопределить более специфический метод HTMLFormElement.prototype.setAttribute).
Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.
Шаг 5: Проверьте значения переменныхРаспространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.
Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:
Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.
Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:
Шаг 6: Внесите исправления
Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:
Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.
Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!
Представьте себе, что вы работаете над этим невероятным новым веб-приложением, и ваши тестеры попросили вас исправить следующие ошибки:
рис. 1: начальный вид нашего JavaScript-приложения в Dragonfly и Firebug, соответственно.Когда вы смотрите на исходный текст в отладчике, обратите внимание на функцию clearLoadingMessage() в самом начале кода. Это неплохое место для контрольной точки.
Как её поставить:
Когда страница будет перезагружена, выполнение скрипта будет остановлено и вы увидите то, что показано на рисунке два.
рис. 2: отладчики остановились в контрольной точке внутри clearLoadingMessage.Давайте взглянем на код функции. Как нетрудно заметить, в ней обновляются два DOM элемента, а в строке 31 упоминается слово statusbar. Похоже, что getElements("p", {"class":"statusbar"}).innerHTML ищет элемент statusbar в дереве DOM. Как бы нам быстро проверить своё предположение?
Вставьте эту инструкцию в командную строку, чтобы проверить. На рисунке три показаны три скриншота (Dragonfly, Firebug и IE8) после чтения innerHTML или outerHTML элемента, возвращенного командой, которую вы исследуете.
Чтобы проверить сделайте следующее:
рис. 3: вывод результата команды в Dragonfly, Firebug, и IE8, соответственно.Командная строка - очень полезный инструмент, который позволяет вам быстро проверять маленькие куски кода. Интеграция консоли Firebug очень полезна - если Ваша команда выводит объект, вы получаете очень интеллектуальное представление. Например, если это объект DOM - вы увидите размеченный результат.
Можно использовать консоль, чтобы провести более глубокое исследование. Строка JavaScript, которую мы изучаем, делает следующие три вещи:
Сюрприз, на выходе… ничего. Таким образом выражение getElements ("p", {"класс:"statusbar" "}) .firstChild указывает на какой то объекст в DOM, который не содержит никакого текста, или не имеет свойства innerText.Тогда, следующий вопрос: что на самом деле является первым дочерним элементом у параграфа? Давайте зададим этот вопрос коммандной строке. (См. четвертый рисунок).
рис. 4: командная строка отладчика СтDragonfly, вывод [объект Text].
Вывод отладчика Dragonfly’s - [объект Text] показывает, что это - текстовый узел DOM. Таким образом мы нашли причину первой проблемы. У текстового узла нет свойства innerText, следовательно, установка значения для p.firstChild.innerText ничего не делает. Эта ошибка легко может быть исправлена, если заменить innerText на nodeValue, который является свойством, определенным стандартом W3C для текстовых узлов.
Теперь, после того как мы разобрались с первой ошибкой:
Чтобы найти место, где вероятно происходит проблема локализации сделайте следующее:
рис. 5: поиск в Dragonfly и в WebInspector.Для того, чтобы проверить, что делает эта функция:
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 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
- Разверните папку 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) в отладчике отображается значение выражения в окне "Переменные".
- Нажмите кнопку "Продолжить" на панели инструментов, чтобы завершить выполнение теста. Заключение
- Начало работы с приложениями HTML5 . Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.
- Работа со страницами стилей CSS в приложениях HTML5 Документ, который демонстрирует, как использовать некоторые из мастеров CSS и окон в IDE и режим проверки в браузере Chrome для визуального определения элементов в источниках проекта.
- Внесение изменений в код JavaScript . В документе описаны основные возможности изменения кода JavaScript, предоставляемые в среде IDE.
- Страница проекта JS Test Driver: http://code.google.com/p/js-test-driver/
- Домашняя страница Jasmine: http://pivotal.github.com/jasmine/
- Введение в JsTestDriver . Введение в использование JsTestDriver с сервером непрерывной интеграции.
- Откройте свой браузер.
- Выберите Инструменты в меню.
- И, наконец, выберите Console.
- Откройте свой браузер.
- Перейти на страницу:
http://www.getfirebug.com. - Следуйте инструкциям:
Установить Firebug. - Откройте свой браузер.
- Выберите Инструменты в меню.
- Выберите Инструменты Инструменты для разработчиков.
- И, наконец, выберите Console.
- Откройте свой браузер.
- Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
http://www.opera.com/dragonfly/. - Откройте свой браузер.
- Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
- Выберите "Панель управления" в нижней части всплывающего окна.
Это упражнение демонстрирует, как можно использовать IDE для отладки файлов JavaScript при ошибке тестирования модуля.
В настоящем учебном курсе демонстрируется, как IDE предоставляет инструменты, которые могут использоваться при отладке и тестировании модулей в файлах JavaScript. Отладка включается автоматически для приложений HTML5 при запуске приложения в браузере Chrome при условии, что расширение NetBeans Connector включено. IDE также позволяет легко настроить и запускать тестирование модулей для файлов JavaScript с помощью платформы тестирования Jasmine и сервера JS Test Driver.
См. также
Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте :
Подробнее о запуске тестов модулей с помощью JS Test Driver см. следующую документацию:
Firebug содержит мощный avaScript отладчик, который дает Вам возможность приостановить выполнение в любой момент и просмотреть каждую переменную на этот момент. Если Ваш код подтормаживает, используйте javascript профилировщик, чтобы измерить производительность и быстро найти узкие места.
Находите скрипты с легкостьюМногие веб-вриложения состоят из большого числа файлов, и найти тот, который нужно отлаживать может быть рутинной и скучной задачей. Меню для выбора скриптов в Firebug сортирует и организует файлы в четкий и понятный список, который поможет Вам найти любой файл одним щелчком пальца.
Firebug позволяет Вам устанавливать брейкпойнты, которые говорят отладчику приостановить выполнение скрипта, когда он дойдет до определенной строки. Пока выполнение приостановлено, Вы можете смотреть значения любых переменных и инспектировать объекты.
Чтобы установить брейкпойнт, кликните на номере любой строки, и там появится красная точка, обозначающая, что брейкпойнт установлен. Кликните на красной точке еще раз, чтобы убрать брейкпойнт.
Брейкпойнты могут создать проблемы, если срабатывают слишком часто. Иногда мы хотим приостанавливать выполнение только при выполнении определенных условий. Firebug позволяет Вам устанавливать "условные" брейпкойнты. Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.
Чтобы установить условный брейкпойнт, просто кликните правой кнопкой на любом номере строки. Появится пузырь с приглашением ввести javascript-выражение. Вы можете сделать правый клик еще раз в любое время, чтобы сменить выражение, или левый клик, чтобы избавиться от брейкпойнта.
Когда отладчик приостановил выполнение, Вы можете продолжать скрипт по одному шагу. Это позволяет Вам четко видеть, как выполнение конкретной строчки влияет на переменные и объекты.
Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки "Run to this Line", чтобы продолжить выполнение до этой строчки.
Не всегда Вы выбираете отладчик... Иногда отладчик выбирает Вас.. Firebug дает Вам возможность заходить в отладчик автоматически, когда происходит ошибка, так что Вы можете исследовать условия, при которых возникла проблема.
Когда отладчик приостанавливает выполнение, Firebug показывает Вам стек вызова, т.е набор вложенных вызовов функций, которые сейчас запущены и ждут возврата.
Стек вызовов представлен компактной полоской кнопок в панели, каждая - с именем функции в стеке. Вы можете кликнуть любую кнопку, чтобы перепрыгнуть на строку, где функция приостановлена и взглянуть на значения локальных переменных изнутри функции.
Во время отладки, часто хочется видеть значение сложных выражений или объектов, которые закопаны в DOM. Firebug позволяет печатать произвольное javascript-выражение, значение которого будет обновляться на каждом шаге отладчика.
Печатая выражения, не забывайте, что можно использовать клавишу Tab для автодополнения свойств объектов.
Пока выполнение приостановлено, Вы можете перемещать мышь над любыми переменными текущей функции, просматривая всплывающие подсказки со значениями. Это замечательный способ не отрывать глаз от кода и получать ответы прямо во время чтения.
Ваше веб-приложение почти совершенно. Вы проработали все ошибки, сделан стильный дизайн и пользователям оно нравится. Только одна проблема - некоторые возможности подтормаживают, и Вы не уверены, почему..
С Firebug Вам больше не придется удивляться, почему код работает медленно. Используя профилировщик Firebug, Вы можете отделить мух от котлет буквально за секунды.
Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку "Profile". Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните "Profile" еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.
Иногда проблемная функция вызывается так много раз, что Вы не можете каждый раз заходить в отладчик. Вы просто хотите знать, когда она вызвана и с какими параметрами.
Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите "Log calls to "имя функции"". Затем перейдите в консоль и смотрите, как в лог вплывают вызовы...
Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.
При написании JavaScript, если никакой инструмент отладки не является очень болезненным.
отладка JavaScriptСредства отладки не трудно писать программы JavaScript.
Ваш код может содержать синтаксические ошибки, логические ошибки, если нет средств отладки, эти ошибки более трудно найти.
Как правило, если происходит ошибка JavaScript, не будет никаких запросов, так что вы не можете найти код совсем не то место.
средства отладки JavaScriptВ поисках ошибки в программном коде называется отладка.
Отладка трудно, но, к счастью, многие браузеры имеют встроенные средства отладки.
Встроенные средства отладки можно запустить или выключить, серьезное сообщение об ошибке будет отправлено пользователю.
С помощью инструментов отладки, мы можем установить точку останова (стоп позиции выполнения кода), и может обнаружить, когда переменная выполнение кода.
Браузер с поддержкой отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.
Если браузер поддерживает отладку, вы можете использовать console.log () метод выводит значение JavaScript в окне отладки:
примеров
Мой первый веб-страницы
а = 5;
б = 6;
с = а + Ь;
console.log (с);
В окне отладки вы можете установить точки останова JavaScript-код.
На каждой точки останова остановит выполнение кода JavaScript, чтобы проверить значение переменных в JavaScript мы.
После того, как проверка будет завершена, вы можете повторно запустить код (например, кнопка Play).
отладчик ключевых словотладчик ключевое слово, чтобы остановить выполнение JavaScript, и вызывать функции отладчика.
Это ключевое слово и установить точки останова в инструменте отладки, эффект тот же.
Если нет отладки имеется, отладчик оператор не будет работать.
Открытый отладчик, выполнение кода останавливается перед третьей линии.
Основные средства отладки браузераКак правило, браузеры позволяют средства отладки, как правило, нажмите клавишу F12, и выберите "Консоль" в меню Отладка.
Каждый браузер, выполните следующие действия:
браузер Chrome
