Современная отладка JavaScript

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

В настоящее время средства отладки доступны для всех основных браузеров.

• Firefox имеет хорошо известное расширение Firebug
• IE8 выпускается со встроенными Developer Tools
• Опера 9.5+ поддердивает отладчик Dragonfly
• У Safari есть JS-отладчик Drosera и DOM-вьювер WebInspector. В более свежих версиях отладчик интегрирован в WebInspector.

На данный момент Firebug и Dragonfly наиболее стабильны. Утилиты IE8 иногда игнорируют контрольные точки, а во время написания этой статьи WebInspector имеет некоторые проблемы совмстимости с последними билдами Webkit.

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

Технология отладки.

Натыкаясь на определенную проблему, обычно вы будете проходить следующие этапы

1. Найти соответствующий код на панели просмотра кода отладчика
2. Установить контрольную точку или точки в том месте, которое вам кажется потенциально проблемным
3. Запустить скрипт еще раз, перезагрузив страницу или нажать кнопку, если речь идет об обработчике события.
4. Ждать, пока отладчик остановит выполнение и сделает возможным пошаговое выполнение кода.
5. Исследовать значения переменных. Например, искать переменные, которые почему то неопределенны(undefined), хотя должны содержать значение, или возвращают «ложь», хотя вы ожидаете, что они возвратят «истину».
6. В случае необходимости, использовать командную строку, для вычисления кода или изменения значений переменных
7. Найти проблему изучив часть кода её вызвашую и устранить её.

Чтобы создать контрольную точку, вы можете также добавлять в ваш код специальную инструкцию отладчика:

function frmSubmit(event){
  event = event || window.event;
  debugger;
  var form = this;
}


Требования

Большинство отладчиков требуют, чтобы код был хорошо отформатирован. Скрипты, написанные «в одну строку», мешают определять ошибки в построчных отладчиках. Обфусцированный код черезвычайно сложен для отладки, особенно упакованный. Много библиотек JavaScript позволяют вам выбирать между упакованными/обфусцированными и нормально отформатированными версиями, разумеется отлаживать скрипты нужно с последними.

Демонстрация отладки

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

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

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: начальный вид нашего JavaScript-приложения в Dragonfly и Firebug, соответственно.

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

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

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

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

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



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

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

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

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

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

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

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

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

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

Давайте попробуем запустить в консоли, что-то большее, чем предыдущая команда. Например вы можете попробовать узнать, какое текущее значение у свойства innerText, перед тем как ему присваивается новое значние. Чтобы узнать это, вы можете напечатать всю команду до знака "=" в командную строку:

getElements( 'p', {'class':'statusbar'} )[0].firstChild.innerText


Сюрприз, на выходе… ничего. Таким образом выражение getElements ('p', {'класс:'statusbar' '}) [0].firstChild указывает на какой то объекст в DOM, который не содержит никакого текста, или не имеет свойства innerText.

Тогда, следующий вопрос: что на самом деле является первым дочерним элементом у параграфа? Давайте зададим этот вопрос коммандной строке. (См. четвертый рисунок).


рис. 4: командная строка отладчика СтDragonfly, вывод [объект Text].

Вывод отладчика Dragonfly’s — [объект Text] показывает, что это — текстовый узел DOM. Таким образом мы нашли причину первой проблемы. У текстового узла нет свойства innerText, следовательно, установка значения для p.firstChild.innerText ничего не делает. Эта ошибка легко может быть исправлена, если заменить innerText на nodeValue, который является свойством, определенным стандартом W3C для текстовых узлов.

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

1. Нажмите [F5] или кнопку 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( /\((.*)\)/ )[1];
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» ⁽²⁾. 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[prop]) 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 <makeElement <init" рядом с именем файла самой левой является текущая взванная функция.


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

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

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

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

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

for (var prop in attributes) {
  el.setAttribute(prop, attributes[prop]);
}



где вы увидите вызов 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[prop] = this[prop];
  }
  return obj;
}
// Код. демонстрирующий использование метода clone():
var myObj1 = { 'id': '1' };
var myObj2 = myObj1.clone();


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

Object.clone = function(originalObject) {
  var obj = {};
  for (var prop in originalObject) {
    obj[prop] = originalObject[prop];
  }
  return obj;
}
// Код. демонстрирующий использование метода clone():
var myObj1 = { 'id': '1' };
var myObj2 = Object.clone(myObj1);
* All source code was highlighted with Source Code Highlighter.

Если у вас возникли проблемы в понимании или использовании каких-то частей данной статьи, не волнуйтесь! Овладение основами сделает вас более профессиональным разработчиком и в конечном счете вы разработаете свой набор методик для использования.

Примечания

¹ Для того, чтобы включить меню отладки/разработки в Safari, нужно зайти в «Правка -> Настройки -> Дополнительно» и поставить галку «Включить меню „Разработка“», после чего в меню браузера появится пункт «Разработать» (небанальное название :) ).
² Для русского языка это не совсем актуально и код сработает, т.к. в FF код выглядит как «ru». Но это только потому, что русский язык один, а норвежских два. Не считая прочих недостатков, если ваш код будет использоваться с другими языками, так делать не стоит