19.2.3.2. Отладка JavaScript

Firebug содержит мощный JavaScript-отладчик, который дает Вам возможность приостановить выполнение в любой момент и просмотреть каждую переменную на этот момент.

Многие веб-приложения состоят из большого числа файлов, и найти тот, который нужно отлаживать может быть рутинной и скучной задачей. Меню для выбора скриптов в Firebug сортирует и организует файлы в четкий и понятный список, который поможет найти любой файл одним щелчком пальца (рис. 19.23).

Рис. 19.23.  Выбор скриптового файла в FireBug

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

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

Firebug позволяет Вам устанавливать "условные" брейпкойнты (рис. 19.24). Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.

Рис. 19.24.  Точки останова в FireBug

Когда отладчик приостановил выполнение, можно продолжать скрипт по одному шагу. Это позволяет четко видеть, как выполнение конкретной строчки влияет на переменные и объекты.

Также Firebug дает возможность заходить в отладчик автоматически, когда происходит ошибка (рис. 19.25).

Рис. 19.25.  Отладчик в FireBug

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

19.2.3.3. Профилирование

Чтобы использовать профилировщик, необходимо зайти во вкладку Console и кликнуть кнопку "Profile". После этого можно увидеть детальный отчет, который показывает, какие функции были вызваны и сколько времени заняла каждая (рис. 19.26).

Рис. 19.26.  Профилирование в FireBug

Помимо этого у каждого файла во вкладке "Сеть" (Net) есть полоска, которая показывает, когда началась и закончилась загрузка, относительно других файлов. Полоски могут показать, например, что JavaScript файлы загружаются по очереди, и никогда – параллельно. Это поможет оптимизировать порядок файлов на странице, чтобы пользователь проводил меньше времени, ожидая показа страницы. Также в панели Net можно фильтровать список по типам файлов (JavaScript, картинки и др.).

Рис. 19.27.  Вкладка "Сеть" в FireBug

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

Плюс ко всему Firebug показывает каждый XMLHttpRequest (например, используемые AJAX), и во вкладке Net, и в Console, вместе с текстом, который был отправлен и получен (рис. 19.28).

Рис. 19.28.  XMLHttpRequest в FireBug

19.2.4. Ключевые термины

Отладка, Профилирование, Internet Explorer Developer Tools, Firebug.