Отладка и тестирование JavaScript в приложениях HTML5

В 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 см. в учебном курсе Начало работы с приложениями HTML5.

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

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

Содержание

Содержимое на этой странице применимо к IDE NetBeans 7.3

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

Программное обеспечение или ресурс Требуемая версия
IDE NetBeans, Java 7.3
Комплект для разработчика на языке Java (JDK) Версия 6 или 7
Браузер Chrome --
Расширение NetBeans Connector для Chrome 1.0.0
Драйвер теста JS JAR --

Примечания.

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

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

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

  1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.
  2. Разверните узел Образцы в мастере создания новых проектов и выберите категорию HTML5.
  3. Выберите проект Учебный курс по телефонному справочнику AngularJS. Нажмите кнопку 'Далее'.
    снимок экрана образца проекта в мастере создания проектов
  4. Укажите местоположение проекта. Нажмите кнопку 'Готово'.

    После нажатия кнопки 'Готово' среда IDE создаст проект и откроет файл index.html в редакторе. В окне 'Проекты' отобразится проект, содержащий index.html и различные таблицы стилей CSS, а также файлы и библиотеки JavaScript.

    снимок экрана узла проектов в окне 'Проекты'

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

  5. Убедитесь, что на панели инструментов в раскрывающимся списке выбран Chrome с NetBeans Integration.
    снимок экрана раскрывающегося списка на панели инструментов
  6. Нажмите кнопку 'Выполнить' на панели инструментов (F6) или щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Выполнить'.

Когда вы запустите проект с помощью кнопки 'Выполнить', первая страница приложения 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 и выберите 'Настройка'.
    снимок экрана настройки узла 'jsTest Driver' в окне 'Службы'
  3. В диалоговом окне 'Настроить' щелкните 'Обзор' и найдите загруженный файл JAR JS Test Driver.
  4. Выберите Chrome с помощью функции отладчика JS Debugger NetBeans. Нажмите кнопку ОК.
    снимок экрана диалогового окна 'Настройка узла jsTest Driver'

    Примечание. Местоположение файла 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

    Примечание.Для запуска 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 и две вкладки в окне 'Выходные данные'.

    снимок экрана jsTestDriver, запущенного в окне браузера

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

    снимок экрана вкладки 'Сервер js-test-driver' в окне 'Выходные данные'

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

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

    снимок экрана выполнения тестов 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' в окне 'Выходные данные'.
    снимок экрана теста с ошибкой на вкладке 'Выполнение тестов 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" при достижении точки останова.

    снимок экрана редактора, в котором отображается IDE, окна 'Оценка кода' и окна 'Переменные'

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

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

Заключение

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



См. также

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

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

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo