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

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

Заключение

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

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

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

Сообщения об ошибках в 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.

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

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

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

1. ‘debugger;’

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

If (thisThing) { debugger; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Найти нужную строку в инпекторе и добавить точку останова
2. Добавить debugger в Ваш скрипт

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

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

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

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

9. Скрипты, не требующие отладки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Представьте себе, что вы работаете над этим невероятным новым веб-приложением, и ваши тестеры попросили вас исправить следующие ошибки:

1. “Loading…” сообщение строки состояния не исчезает, когда приложение закончило загружаться.
2. Язык по умолчанию - норвежский, даже в английских версиях IE и Firefox.
3. Где то в коде образовалась глобальная переменная prop (зло - прим. пер.).
4. В DOM-вьювере все элементы почему то имеют атрибут «clone».

Запуск отладчиков

• В Firefox вы должны убедится, что у вам установлено расширение Firebug. Выберите “Инструменты > Firebug > Open Firebug”.
• В Опере 9.5+, выберите “Инструменты > Дополнительно > Средства разработки.”
• В бете IE, выберите “Сервис > Панели > Панели обозревателя > IE Developer Toolbar.”
• В Safari или WebKit, сначала включите меню отладки (1) , затем выберите “Разработать > Показать веб-инспектор”

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

Ошибка № 1: Сообщение “Загрузка …”

Если вы посмотрите на отлаживаемое приложение, то сначала вы увидите то, что изображено на рисунке 1.


рис. 1: начальный вид нашего JavaScript-приложения в Dragonfly и Firebug, соответственно.

Когда вы смотрите на исходный текст в отладчике, обратите внимание на функцию clearLoadingMessage() в самом начале кода. Это неплохое место для контрольной точки.

Как её поставить:

1. Щелкните мышью в левом поле на номере строки, чтобы установить контрольную точку на первой строке
2. Перезагрузите страницу.

Обратите внимание: контрольная точка должна быть установлена на строке с кодом, который выполнится, когда функция будет запущена. Строка, которая содержит clearLoadingMessage(){ не подходит, так как является лишь определением функции. Если вы установите контрольную точку здесь, отладчик на ней не остановится, вместо этого контрольную точку надо устанавливать внутри функции.

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

рис. 2: отладчики остановились в контрольной точке внутри clearLoadingMessage.

Давайте взглянем на код функции. Как нетрудно заметить, в ней обновляются два DOM элемента, а в строке 31 упоминается слово statusbar. Похоже, что getElements("p", {"class":"statusbar"}).innerHTML ищет элемент statusbar в дереве DOM. Как бы нам быстро проверить своё предположение?

Вставьте эту инструкцию в командную строку, чтобы проверить. На рисунке три показаны три скриншота (Dragonfly, Firebug и IE8) после чтения innerHTML или outerHTML элемента, возвращенного командой, которую вы исследуете.

Чтобы проверить сделайте следующее:

1. Найдите командную строку:
   * В Firebug, переключитесь в закладку “Console”.
   * В Dragonfly, просмотрите пониже панели кода JavaScript.
   * В IE8, найдите закладку справа «Console».
2. Вставьте getElements("p", {"class":"statusbar"}).innerHTML в командную строку.
3. Нажмите Enter.

рис. 3: вывод результата команды в Dragonfly, Firebug, и IE8, соответственно.

Командная строка - очень полезный инструмент, который позволяет вам быстро проверять маленькие куски кода. Интеграция консоли Firebug очень полезна - если Ваша команда выводит объект, вы получаете очень интеллектуальное представление. Например, если это объект DOM - вы увидите размеченный результат.

Можно использовать консоль, чтобы провести более глубокое исследование. Строка JavaScript, которую мы изучаем, делает следующие три вещи:

1. Получает ссылку на элемент statusbar.
2. Находит firstChild, другими словами, первый узел в этом параграфе.
3. Устанавливает свойство innerText.

Давайте попробуем запустить в консоли, что-то большее, чем предыдущая команда. Например вы можете попробовать узнать, какое текущее значение у свойства 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 для текстовых узлов.

Теперь, после того как мы разобрались с первой ошибкой:

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

Ошибка два: проблема определения языка.

Вы, возможно, обратили внимание на переменную lang;/*language*/ в начале скрипта. Можно предпложить, что код устанавливающий значение этой переменной и вызывает проблему. Можно попробовать найти этот код используя встроенную в отладчики функцию поиска. В Dragonfly поиск находтится прямо над просмотрщиком кода, в Firebug - в правом верхнем углу (см. рисунок 5)

Чтобы найти место, где вероятно происходит проблема локализации сделайте следующее:

1. Напечатайте lang = в поле поиска.
2. Установите контрольную точку на строке, где переменной lang задается значение.
3. Перезагрузите страницу.

У WebInspector тоже есть очень удобная функция поиска. Она позволяет искать что угодно одновременно и в разметке страницы, и в CSS, и в коде JavaScript. Результаты показывюется на отдельной панели, где вы можете дважды кликнуть по ним, чтобы перейти в нужное место, как показано на скриншоте.

рис. 5: поиск в Dragonfly и в WebInspector.

Для того, чтобы проверить, что делает эта функция:

1. Нажмите кнопку «step into» для входа внутрь функции getLanguage.
2. Жмите ее еще и еще, пошагово выполняя код
3. В окне просмотра переменных смотрите как меняются их значния.

Войдя в функцию вы увидите попытку прочитать язык из строки юзер-агента браузера, путем анализа navigator.userAgent.

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; });

Сделайте следующее:

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

В IE8 DT имеется закладка «Watch», однако прерывания в момент изменения переменной не происходит. Так что этот пример работает только в Firefox, Opera и Safari.

Когда вы перезагрузите страницу, выполнение кода немедленно остановится там где будет определена переменная «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); /* вызываем ранее сохраненный системный метод, чтобы нормальные свойства устанавливались корректно */
};

Итак, делаем следующее:

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

После перезагрузки, скрипт начинает обрабатывать DOM-дерево, но сразу же останавливается, как только произойдет установка «плохого» атрибута. (Обратите внимание, что в текущих версиях Firefox, реализация setAttribute различна для разных элементов. Код, приведенный выше работает всегда как надо только в Опере; чтобы получить тот же самый эффект в Firefox, вы можете заменить слово Element на HTMLFormElement, чтобы переопределить более специфический метод HTMLFormElement.prototype.setAttribute).

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

рис. 9: Стек вызовов в Dragonfly и IE8.

На рисунке 10 показан стек в Firebug. В строке "setAttribute " рядом с именем файла самой левой является текущая взванная функция.

рис. 10: Стек вызовов в Firebug. Самая последняя вызванная функция слева.

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

Как использовать стек вызовов, чтобы найти проблемную функцию:

1. Нажмите на имя функции в стеке, которую вы хотите видеть.
2. Обратите внимние, что локальные переменные обновляются на значения которые они имеют в выбраном контексте.
3. Помните, что, если вы используете кнопки пошагового исполнения то они будут перемещать вас с места точки остановки, даже если вы находитесь в другой части стека.

Выбор makeElement перенесет нас в другую часть кода:

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();

Сделайте лучше так:

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

1. Разверните узел js в окне "Проекты" и дважды щелкните файл controllers.js , чтобы открыть файл в редакторе.
2. Поместите точку останова строки на 16 строке в controllers.js , щелкнув левую границу.
   
   

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

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

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

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

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

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

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

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

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

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

8. Используйте кнопки на панели инструментов для перехода между функциями 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 .

1. Загрузите JAR JS Test Driver и сохраните файл JAR в локальной системе.
2. В окне "Службы" щелкните правой кнопкой мыши узел JS Test Driver и выберите "Настройка".
   
3. В диалоговом окне "Настроить" щелкните "Обзор" и найдите загруженный файл JAR JS Test Driver.
4. Выберите Chrome с помощью функции отладчика JS Debugger NetBeans. Нажмите кнопку ОК.
   
   

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

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

5. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "New > Other"(Создать > Другое).
6. Выберите Файл конфигурации jsTestDriver в категории "Тестирование модулей". Нажмите кнопку "Далее".
7. Убедитесь, что jsTestDriver задан как "Имя файла".
8. В поле "Созданный файл" убедитесь, что файл находится в папке config проекта (AngularJSPhoneCat/config/jsTestDriver.conf).

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

9. Убедитесь, что установлен флажок для загрузки библиотек 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 в список загружаемых файлов.

10. Добавьте следующие местоположения (выделены полужирным шрифтом) в раздел 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
11. Отключите все точки останова, заданные в проекте.

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

12. После щелчка "Тестировать 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 отсутствуют тесты.)

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

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

    
    

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

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

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

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

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

3. Убедитесь, что сервер JS Test Driver запущен и что сообщение состояния отображается в окне браузера Chrome.
4. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите команду "Тестирование".
   
   

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

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

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

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

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

7. Установите точку останова в строке, где в тесте произошла ошибка (строка 41).
8. Щелкните правой кнопкой мыши узел проекта в окне "Проекты" и выберите "Тестирование".

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

   
   

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

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

Заключение

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