HTML5 - централизованный поиск
Web-разработка, полезные заметки
prev next

А.3.2. Отладчики JavaScript

Возможность отладки JavaScript-кода особенно полезна из-за изменчивости данного языка. Программисты, использующие С# или Java, обычно узнают, какие свойства и методы доступны на данном объекте, изучая его определение класса, также они могут определить число и тип аргументов метода. При работе же с JavaScript-кодом не всегда можно выяснить, с каким числом аргументов должна вызываться функция и в какие переменные превратятся эти аргументы внутри функции. Последний момент представляет особые проблемы с точки зрения обработчиков обратных вызовов, в которых вызов функции может инициироваться неизвестным объектом или самим браузером.

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

var x=3;
var y=x*7;
debugger;
var z=x+y;

На третьей строке кода (рис.А.5) контроль над выполнением кода будет передан любому отладчику, зарегистрированному в браузере. В это время можно эудет увидеть значения переменных х и у. Поскольку переменная z к это-чу моменту еще не объявлена, ее значение можно будет исследовать только тосле того, как пользователь "перешагнет" через четвертую строку кода.

Рис.А.5. Использование оператора debugger (JavaScript) позволяет программно инициировать точку прерывания

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

Навигация по стеку вызовов

В JavaScript при выполнении функции создается новый контекст выполнения, имеющий собственный набор локальных переменных. Если отладчик прерывает процесс выполнения функции, он может видеть ее локальные переменные, но не переменные функции, вызвавшей данную. Рассмотрим следующий пример:

function doASum(){
var a=3;
var b=4;
var c=multiply(a-2,b+6);
return {a+b)/c; }

function multiply(varl,var2){
var nl=parseFloat(varl);
var n2=parseFloat(var2);
debugger; return nl*n2; }

В момент остановки отладчиком процесса выполнения мы видим переменные nl, n2, varl и var2. Изучая проблемы нашей программы, мы можем подумать, что они связаны с аргументами, переданными функции. Следовательно, нам нужно узнать, какие значения имеют переменные а и b во внешнем методе doASum(). Мы можем добавить новую точку прерывания в doASum() и снова запустить программу, но в сложном приложении возврат к данному состоянию может потребовать времени. Если отладчик поддерживает навигацию по стеку вызовов, мы можем просто подняться по этому стеку до функции doASum() и исследовать ее состояние точно так же, как если бы мы установили точку прерывания в третьей строке на вызове функции multiply() (рис. А.6). В сложной программе стек вызовов может быть довольно глубоким, поэтому здесь особенно полезна способность отладчика перемещаться вверх-вниз по всем уровням.

Рис.А.6. Отладчик Mozilla Venkman позволяет исследовать локальные переменные в функциях, находящихся в стеке вызовов выше текущей точки выполнения.

Наблюдающие выражения

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

Условные прерывания

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

for (var i=0; i<100; i++){
  var divisor=i-57;
  var val=42/divisor;
  plotOnGraph(I, val); }

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

for (var i=0;i<100;i++){ 
  var divisor=i-57;
  debugger;
  var val=42/divisor;
  plotOnGraphfi,val); }

Однако в таком случае нам придется многократно щелкать на кнопке "Продолжить", пока отладчик не доберется до итерации, на которой появляется ошибка. Можно поступить умнее и проверить в коде наличие ошибки.

for (var i=0;i<100;i++){
  var divisor=i-57;
  if (divisor^=0){ debugger; }
  var val=42/divisor;
  plotOnGraph(i,val); }

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

Условия подобного типа можно устанавливать, только модифицируя код. Тем не менее, если присваивать точки прерывания с помощью IDE отладчика, условия на эти точки можно задать независимо от реального кода (рис. А.7). Данная возможность поддерживается некоторыми отладчиками, которые позволяют пользователю привязывать к точке прерывания выражение и останавливать поток, только если значение этого выражения равно true.

Рис.А.7. Задание условного прерывания в отладчике Mozilla Venkman

Изменение значений переменных

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

Это возможно с некоторыми отладчиками, позволяющими считывать и записывать значения локальных переменных (рис. А.8). Допустим, что в приведенном выше примере мы разобрались, что проблема связана с делением на нуль в цикле, но желаем продолжить выполнение программы, чтобы изучить код, находящийся после цикла. В таком случае мы можем временно присвоить делителю значение 1, разрешив дальнейшее выполнение программы.

Существует множество отладчиков для JavaScript-кода. В число бесплатных продуктов входит модуль Venkman для Mozilla Firefox и Microsoft Script Debugger {подробнее о нем - ниже, в разделе "Ресурсы") для Internet Explorer. Модуль Venkman поддерживает все описанные выше дополнительные функции, в него также встроено средство профилирования, описанное в главе 7. Модуль Microsoft Script Debugger поддерживает навигацию по стеку вызовов и "окно немедленного действия" для выполнения JavaScript-выражений на лету (в частности, организацию запросов и присвоение значений локальным переменным).

Интегрированные среды разработки Visual Studio и Komodo также поддерживают отладчики JavaScript с богатым набором возможностей.

Рис.А.8. Изменение значения переменной в работающей программе с помощью отладчика Mozilla Venkman

Отладка серверных приложений

Помимо отладки JavaScript-кода на стороне клиента, часто бывает прлезна отладка и серверной части кода. Интегрированные среды разработки приложений Java и .NET обычно имеют высококачественные отладчики. Инструменты Eclipse и Visual Studio (как и большинство других IDE) предлагают прекрасные возможности отладки. Для отладки Web-приложений, основанных на Java, можно использовать сервер приложений JBoss и модули Eclipse, предлагающие простую систему развертывания и отладки Web-приложений. Версии Visual Studio, предназначенные для Web-разработки, имеют встроенный Web-сервер с поддержкой ASP.NET. По нашему мнению, Visual Studio - это единственная среда разработки, поддерживающая отладку клиентского и серверного кода с общим интерфейсом. Отметим, что часто бывает, полезна еще и отладка сетевого трафика. Как и предыдущих случаях, существует множество бесплатных и коммерческих продуктов, которые подходят для этой цели. Рассмотрим их.

prev next
преобрести английскую версию книги "AJAX в действии" в Ozon.ru
преобрести русскую версию книги "AJAX в действии" в Ozon.ru

Hosted by uCoz