Проводим отладку JavaScript-приложений::Журнал СА 1.2008
www.samag.ru
     
Поиск   
              
 www.samag.ru    Web  0 товаров , сумма 0 руб.
E-mail
Пароль  
 Запомнить меня
Регистрация | Забыли пароль?
Журнал "Системный администратор"
Журнал «БИТ»
Подписка
Архив номеров
Где купить
Наука и технологии
Авторам
Рекламодателям
Контакты
   

  Опросы
  Статьи

Событие  

В банке рассола ждет сисадмина с полей фрактал-кукумбер

Читайте впечатления о слете ДСА 2024, рассказанные волонтером и участником слета

 Читать далее...

Организация бесперебойной работы  

Бесперебойная работа ИТ-инфраструктуры в режиме 24/7 Как обеспечить ее в нынешних условиях?

Год назад ИТ-компания «Крок» провела исследование «Ключевые тренды сервисного рынка 2023». Результаты

 Читать далее...

Книжная полка  

Читайте и познавайте мир технологий!

Издательство «БХВ» продолжает радовать выпуском интересных и полезных, к тому же прекрасно

 Читать далее...

СУБД PostgreSQL  

СУБД Postgres Pro

Сертификация по новым требованиям ФСТЭК и роль администратора без доступа к данным

 Читать далее...

Критическая инфраструктура  

КИИ для оператора связи. Готовы ли компании к повышению уровня кибербезопасности?

Похоже, что провайдеры и операторы связи начали забывать о требованиях законодательства

 Читать далее...

Архитектура ПО  

Архитектурные метрики. Качество архитектуры и способность системы к эволюционированию

Обычно соответствие программного продукта требованиям мы проверяем через скоуп вполне себе понятных

 Читать далее...

Как хорошо вы это знаете  

Что вам известно о разработках компании ARinteg?

Компания ARinteg (ООО «АРинтег») – системный интегратор на российском рынке ИБ –

 Читать далее...

Графические редакторы  

Рисование абстрактных гор в стиле Paper Cut

Векторный графический редактор Inkscape – яркий представитель той прослойки open source, с

 Читать далее...

День сисадмина  

Учите матчасть! Или как стать системным администратором

Лето – время не только отпусков, но и хорошая возможность определиться с профессией

 Читать далее...

День сисадмина  

Живой айтишник – это всегда движение. Остановка смерти подобна

Наши авторы рассказывают о своем опыте и дают советы начинающим системным администраторам.

 Читать далее...

Виртуализация  

Рынок решений для виртуализации

По данным «Обзора российского рынка инфраструктурного ПО и перспектив его развития», сделанного

 Читать далее...

Книжная полка  

Как стать креативным и востребованным

Издательский дом «Питер» предлагает новинки компьютерной литературы, а также книги по бизнесу

 Читать далее...

Книжная полка  

От создания сайтов до разработки и реализации API

В издательстве «БХВ» недавно вышли книги, которые будут интересны системным администраторам, создателям

 Читать далее...

Разбор полетов  

Ошибок опыт трудный

Как часто мы легко повторяем, что не надо бояться совершать ошибки, мол,

 Читать далее...

1001 и 1 книга  
19.03.2018г.
Просмотров: 6139
Комментарии: 0
Машинное обучение с использованием библиотеки Н2О

 Читать далее...

12.03.2018г.
Просмотров: 6851
Комментарии: 0
Особенности киберпреступлений в России: инструменты нападения и защита информации

 Читать далее...

12.03.2018г.
Просмотров: 4133
Комментарии: 0
Глубокое обучение с точки зрения практика

 Читать далее...

12.03.2018г.
Просмотров: 2975
Комментарии: 0
Изучаем pandas

 Читать далее...

12.03.2018г.
Просмотров: 3780
Комментарии: 0
Программирование на языке Rust (Цветное издание)

 Читать далее...

19.12.2017г.
Просмотров: 3788
Комментарии: 0
Глубокое обучение

 Читать далее...

19.12.2017г.
Просмотров: 6279
Комментарии: 0
Анализ социальных медиа на Python

 Читать далее...

19.12.2017г.
Просмотров: 3133
Комментарии: 0
Основы блокчейна

 Читать далее...

19.12.2017г.
Просмотров: 3431
Комментарии: 0
Java 9. Полный обзор нововведений

 Читать далее...

16.02.2017г.
Просмотров: 7245
Комментарии: 0
Опоздавших не бывает, или книга о стеке

 Читать далее...

17.05.2016г.
Просмотров: 10615
Комментарии: 0
Теория вычислений для программистов

 Читать далее...

30.03.2015г.
Просмотров: 12334
Комментарии: 0
От математики к обобщенному программированию

 Читать далее...

18.02.2014г.
Просмотров: 13966
Комментарии: 0
Рецензия на книгу «Читаем Тьюринга»

 Читать далее...

13.02.2014г.
Просмотров: 9098
Комментарии: 0
Читайте, размышляйте, действуйте

 Читать далее...

12.02.2014г.
Просмотров: 7052
Комментарии: 0
Рисуем наши мысли

 Читать далее...

10.02.2014г.
Просмотров: 5360
Комментарии: 3
Страна в цифрах

 Читать далее...

18.12.2013г.
Просмотров: 4592
Комментарии: 0
Большие данные меняют нашу жизнь

 Читать далее...

18.12.2013г.
Просмотров: 3400
Комментарии: 0
Компьютерные технологии – корень зла для точки роста

 Читать далее...

04.12.2013г.
Просмотров: 3127
Комментарии: 0
Паутина в облаках

 Читать далее...

03.12.2013г.
Просмотров: 3378
Комментарии: 0
Рецензия на книгу «MongoDB в действии»

 Читать далее...

02.12.2013г.
Просмотров: 2999
Комментарии: 0
Не думай о минутах свысока

 Читать далее...

Друзья сайта  

 Проводим отладку JavaScript-приложений

Архив номеров / 2008 / Выпуск №1 (62) / Проводим отладку JavaScript-приложений

Рубрика: Веб /  Веб

Андрей Уваров

Проводим отладку JavaScript-приложений

В последнее время при разработке веб-приложений всё больше внимания стали уделять клиентской части – программированию на JavaScript. Яркими примерами являются Gmail.com, Live.com и многие другие сервисы, имеющие огромную популярность. Несметное количество пользователей этих сервисов – подтверждение жизнеспособности идеи усложнения клиентской логики. Цель статьи – осветить процесс разработки веб-приложений на языке JavaScript, а точнее, его практическую сторону – написание и отладку кода.

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

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

Перечисленные правила не являются чем-то новым в разработке и применимы к большинству языков программирования. Более подробно стоит остановиться лишь на последнем пункте: написании тестов для JavaScript. Но об этом чуть позже.

Итак, даже придерживаясь упомянутых правил, вы не застрахованы от ошибок. Существует три их основных типа:

  • синтаксические ошибки;
  • ошибки времени исполнения;
  • логические ошибки.

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

Ошибки времени исполнения являются более сложными для выявления; многие из них – следствие того, что язык JavaScript слаботипизирован.

<script language="javascript" type="text/javascript">

    alert(eval("document,getElementById('test').value"));

</script>

Так, мы поставили «запятую» вместо «точки». И ошибка обнаружится, только когда программа будет выполняться.

<script language="javascript" type="text/javascript">

    alert(document,getElementById 'test').value);

</script>

А в данном случае мы увидим предупреждение об ошибке уже на этапе загрузки страницы.

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

<script language="javascript" type="text/javascript">

    var myArray = new Array(1, 1, 1, 1);

    var sum = 0;

    // Попробуем найти сумму значений всех элементов массива

    for (var i = 1; i < myArray.length; i++) {

                 sum += myArray[i];

    }

    document.write(sum);

</script>

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

Модульное тестирование

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

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

  • Благодаря тестам существенно повышается количество ошибок, найденных на этапе разработки, и соответственно повышается качество продукта.
  • Разработчик вынужден писать код, приспособленный для тестирования. Следствием из этого является более чёткий и структурированный код.
  • Тесты экономят время разработчика, которое он вынужден был бы тратить на тестирование кода.

Существует несколько средств для модульного тестирования JavaScript-кода. Наиболее популярными являются реализации JUnit (http://jsunit.net и http://jsunit.berlios.de) (так как обе реализации имеют название JsUnit, то во избежание путаницы будем обозначать их доменными именами).

Суть модульного тестирования заключается в том, что для каждого тестируемого метода пишется специальный тестовый метод. При помощи тестового метода проверяется корректность реализованной логики. Тестовые методы объединяются в группы (test suites), а затем выполняются при помощи UnitRunner – специального компонента фрэймворка (JsUnit).

Познакомимся чуть ближе с модульным тестированием на примере jsunit.net.

Итак, в качестве метода, корректность работы которого нам необходимо проверить, мы выберем isCredit

CardNumberValid(), которая проверяет валидность номера кредитной карты (реализацию опустим), и обусловимся, что данная функция находится в файле commons.js.

Для проверки работоспособности данного метода создадим тестовый метод и поместим его в файл tests/testCommons.html:

...

 <script language="javascript" type="text/javascript" src="../commons.js"></script>

 <script language="javascript" type="text/javascript" src="./jsunit/app/jsUnitCore.js"></script>

 <script language="javascript" type="text/javascript">

 function testIsCreditCardNumberValid() {

// assert - специальная функция JsUnit, которая в случае 

// если ей на вход подаётся значение false, сигнализирует

// о том, что тест провалился, и предоставляет информацию

// о конкретном месте, где это произошло

    assert(!isCreditCardNumberValid("foo"));

    assert(!isCreditCardNumberValid(null));

    assert(isCreditCardNumberValid("446667651"));

 }

 </script>

...

Здесь и далее содержимое файла опускается, так как не имеет для нас особого значения.

В качестве следующего шага создадим группу для нашего теста – файл tests/testSuite.html:

...

    <script language="javascript" type="text/javascript" src="./jsunit/app/jsUnitCore.js"></script>

    <script language="javascript" type="text/javascript">

    function coreSuite() {

            var result = new top.jsUnitTestSuite();

            result.addTestPage("./myTest.html");

            return result;

    }

    function suite() {

            var newsuite = new top.jsUnitTestSuite();

            newsuite.addTestSuite(coreSuite());

            return newsuite;

    }

    </script>

...

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

<полный путь>testRunner.html?testpage=<путь>testSuite.html

В моём случае это:

file:///users/dashin/Documents/work/articles/samag/debugging-js/examples/jsunit/testRunner.html?testpage= \

    /users/dashin/Documents/work/articles/samag/debugging-js/examples/testSuite.html

Как видно из рис. 1 – наш тест успешно пройден, и мы можем считать, что функция isCreditCardNumberValid() нормально справляется со своей задачей.

Рисунок 1. Результат выполнения теста

Рисунок 1. Результат выполнения теста

Тестирование является лишь способом выявления ошибок, и в случае с модульным тестированием мы также можем определить фрагмент кода, содержащий ошибку. Но точное место ошибки не всегда представляется возможным распознать при помощи тестов. Вот тут и начинается настоящая отладка приложения. Самым простым и самым распостранённым, но не самым удобным и изящным средством отладки является функция alert(). К ней прибегают многие разработчики, чтобы уже на этапе выполнения программы узнать значение какой-либо переменной или функции. Данная функция выведет тело интересующей функции или значение переменной:

<script type="text/javascript" >

function $(id) {

    return document.getElementById(id);

}

alert($);

</script>

Рисунок 2. Вывод тела функции при помощи alert()

Рисунок 2. Вывод тела функции при помощи alert()

Логгирование

Более правильным и удобным решением является использование какого-либо логгера. Логгеры – это специальные библиотеки, позволяющие выводить отладочную информацию во время выполнения программы. На данный момент существует большое количество таких библиотек. Все они близки по функциональности, поэтому выбрать для себя можно любую, основываясь на своих «религиозных» убеждениях.

Принцип использования логгеров аналогичен отладке приложений при помощи alert(), но на практике логгеры оказываются существенно удобней. Рассмотрим работу логгеров на примере Log4js (http://log4js.berlios.de).

Log4js очень похож на log4j (http://logging.apache.org/log4j). Log4j является аналогичным проектом, появившимся ранее и написанным на Java. Суть заключается в том, что мы выводим интересующую нас информацию при помощи специальных функций: fatal(), error(), warn() и других, и можем в конфигурационном файле определить, каким образом эти сообщения будут выводиться. Так, например, мы можем использовать для этого дополнительное окно браузера или же при помощи AJAX незаметно отправлять сообщения на сервер, где они будут сохраняться.

<html>

<head>

 <title>Log4js example</title>

 <script src="log4js.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript" >

    var myLogger = new Log4js.getLogger("windowTest");

    // Устанавливаем режим работы логгера

    myLogger.setLevel(Log4js.Level.ALL);

    // Задаём способ логгирования

    myLogger.addAppender(new Log4js.ConsoleAppender(false));

    // Тестовые сообщения

    myLogger.info('an info');

    myLogger.warn('a warning');

    myLogger.error('an error');

    myLogger.fatal('fatal error message');

    myLogger.trace('trace message');

    myLogger.debug('debug message');

</script>

</body>

</html>

Рисунок 3. Логгер в работе

Рисунок 3. Логгер в работе

В данном логгере существует несколько режимов работы: OFF, FATAL, ERROR, WARN, INFO, DEBUG, TRACE, ALL. В режиме OFF не отображается ни один из типов сообщений, а в режиме ALL отображаются все типы сообщений. Каждый режим включает в себя предыдущий. Так, например, при включенном режиме WARN будут выводиться все сообщения warn(), error() и fatal(), а при включенном FATAL будут отображаться только сообщения fatal().

Логгеры весьма хороши для использования на рабочих серверах. С их помощью можно узнать о клиентских ошибках и оказать своевременную помощь коду – устранить ошибки. Но злоупотреблять логгерами также не стоит, так как они могут привести к лишним затратам процессорного времени.

Отладчики

Наряду с логгированием для отладки приложений применяют специальные программы – отладчики. Одними из самых популярных на данный момент являются Firebug (http://www.getfirebug.com) и Venkman (http://www.mozilla.org/projects/venkman). Firebug и Venkman представляют собой расширения для браузера Firefox и предоставляют разработчику возможность пошаговой отладки, установки условных и безусловных точек остановки, просмотра значений переменных во время выполнения скриптов, профилирования, а также просмотра HTTP-заголовков (реализовано только в Firebug) и некоторые другие полезные вещи. На данный момент эти отладчики являются наиболее функциональными и удобными из существующих. И в использовании практически ничем не отличаются от отладчиков для других языков.

Рассмотрим вкратце процесс отладки с использованием Firebug. Прежде всего необходимо включить данное расширение, это делается на вкладке «Tools». Сам отладчик может работать как в отдельном окне, так и в фрейме браузера. Затем открываем в браузере страничку, содержащую интересующий нас JavaScript-код. Теперь в отладчике мы можем найти интересующий код, поставить точку остановки и продолжить выполнять код уже пошагово, внимательно разыскивая ошибку.

Рисунок 4. Firebug на службе отладки

Рисунок 4. Firebug на службе отладки

Почти постоянный рост популярности JavaScript привёл к тому, что сейчас в нашем распоряжении находится достаточное количество средств, призванных упростить разработку и повысить качество результата.


Комментарии отсутствуют

Добавить комментарий

Комментарии могут оставлять только зарегистрированные пользователи

               Copyright © Системный администратор

Яндекс.Метрика
Tel.: (499) 277-12-45
E-mail: sa@samag.ru