Подробный гайд по отладке кода на JavaScript в Chrome Devtools. Введение в стек вызовов. Быстрый поиск DOM-элементов

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

Находите скрипты с легкостью

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

Приостанавливайте выполнение на любой строчке

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

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

Приостановить выполнение, только если...

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

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

По одному шагу

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

Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки "Run to this Line", чтобы продолжить выполнение до этой строчки.

Я прерываюсь при ошибках

Не всегда Вы выбираете отладчик... Иногда отладчик выбирает Вас.. Firebug дает Вам возможность заходить в отладчик автоматически, когда происходит ошибка, так что Вы можете исследовать условия, при которых возникла проблема.

Развернутый стек

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

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

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

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

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

Подсказки к переменным

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

Профилируйте производительность JavaScript

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

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

Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку "Profile". Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните "Profile" еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.

Логирование вызовов функций

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

Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите "Log calls to "имя функции"". Затем перейдите в консоль и смотрите, как в лог вплывают вызовы...

Перейти прямо на строку 108

Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.

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

Результатом увеличения сложности приложений является необходимость в наличии мощных инструментов для отладки, которые позволяют быстро и эффективно найти источник ошибки. Простой вывод значений переменных с помощью функции alert() потерял свою актуальность.

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль - общий взгляд

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

• в браузере Chrome и Dragonfly для Opera - Ctrl + Shift + I
• Firebug - F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

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

Современным решением является использование метода console.log , который выводит значения переменных на панель консоли:

Console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли

Метод можно использовать для вывода вычисленных значений:

Function calcPhotos() { total_photos_diff = total_photos - prev_total_photos; // Выводим значения переменных в консоль console.log(total_photos_diff); }

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

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Выводим значения в консоль console.log(total_photos_diff); // Обновляем значения t = t*1.3; p = p*1.1; } setInterval(function() { calcPhotos(t,p); },100);

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info() : выводит иконку "информация" и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn() : выводит иконку "предупреждение" и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error() : выводит иконку "ошибка" и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group() :

// Первая группа console.group("Photo calculation"); console.info("Total difference is now " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Вторая группа console.group("Incrementing variable"); console.log("Total photos is now: " + t); console.log("Prev total photos is now: " + p); console.groupEnd();

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug .

Прерывание хода выполнения скрипта

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

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

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

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

Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:

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

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

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

В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт "Edit Breakpoint" для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

If (total_photos_diff > 300) { debugger; // запускаем отладчик и прерываем выполнение кода }

Другие способы прервать выполнение кода

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

Остановка при изменении DOM

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

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки "Pause " в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Первая группа console.info("Total difference is now " + total_photos_diff); // Обновляем значения t = t+5; p = p+1; // Необрабатываемое исключение if (total_photos_diff > 300) { throw 0; } // Обрабатываемое исключение if (total_photos_diff > 200) { try { $$("#nonexistent-element").hide(); } catch(e) { console.error(e); } } } setInterval(function() { calcPhotos(t,p); },50);

Введение в стек вызовов

Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues() , что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

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

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

Результатом увеличения сложности приложений является необходимость в наличии мощных инструментов для отладки, которые позволяют быстро и эффективно найти источник ошибки. Простой вывод значений переменных с помощью функции alert() потерял свою актуальность.

В данном уроке проводится краткий обзор возможностей современных инструментов разработчиков, которые помогают сделать отладку JavaScript кода более простым процессом. Основное внимание будет уделяться возможностям браузера Chrome и дополнения Firebug для FireFox, но большинство описанных функций доступны и в других инструментах, например, Dragonfly для Opera.

Консоль - общий взгляд

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

• в браузере Chrome и Dragonfly для Opera - Ctrl + Shift + I
• Firebug - F12

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

Данные выводим в консоль

Консоль может не только показывать ошибки в коде скрипта. С помощью Console API и Command Line API можно управлять выводом данных в консоль. Самая известная и полезная команда .log().

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

Современным решением является использование метода console.log , который выводит значения переменных на панель консоли:

Console.log(“Captain’s Log”); // выводит “Captain’s Log” в панель консоли

Метод можно использовать для вывода вычисленных значений:

Function calcPhotos() { total_photos_diff = total_photos - prev_total_photos; // Выводим значения переменных в консоль console.log(total_photos_diff); }

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

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Выводим значения в консоль console.log(total_photos_diff); // Обновляем значения t = t*1.3; p = p*1.1; } setInterval(function() { calcPhotos(t,p); },100);

Выделение сообщений

В выше приведенном примере цикл будет выводить много значений переменных в консоль. Однако, часто бывает удобно визуально разделять различные данные, чтобы эффективно выделять в коде места, требующие повышенного внимания. Для решения таких задач Console API имеет несколько методов.

console.info() : выводит иконку "информация" и выделяет цветом представляемую информацию. Данный метод удобно использовать для предупреждения о различных событиях.

console.warn() : выводит иконку "предупреждение" и выделяет цветом представляемую информацию. Удобно использовать для информации о выходе параметров за рамки ограничений.

console.error() : выводит иконку "ошибка" и выделяет цветом представляемую информацию. Удобно использовать для представления информации об ошибках и критических условиях.

Примечание: инструмент разработчика Chrome не имеет средств для различного представления информации в консоли.

Использование различных методов для вывода информации в консоль позволяет представить данные в наглядном виде. Представление информации можно улучшить с помощью объединения в блоки. Используется метод console.group() :

// Первая группа console.group("Photo calculation"); console.info("Total difference is now " + total_photos_diff); console.log(total_photos_diff); console.groupEnd(); // Вторая группа console.group("Incrementing variable"); console.log("Total photos is now: " + t); console.log("Prev total photos is now: " + p); console.groupEnd();

Данный пример сгруппирует информацию в консоли. Визуально е представление будет различаться в разных браузерах, на рисунке ниже представлен вид в Dragonfly для Opera:

Выше приведенные примеры представляют небольшой список доступных методов из Console API. Имеется много других полезных методов, которые описаны на официальной странице Firebug .

Прерывание хода выполнения скрипта

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

Чтобы облегчить процесс отладки можно прерывать ход выполнения кода в определенной точке с получением доступа к данным. Для этого использутся точки прерывания.

Работаем с точками прерывания

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

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

Затем можно продолжить выполнение кода с помощью специальных кнопок, которые располагаются вверху боковой панели:

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

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

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

В примере на рисунке выполнение кода не будет прерываться до тех пор, пока значение перменной total_photos_diff не станет больше 200.

Для активации условного прерывания нужно нажать правую клавишу мыши на точке прерывания и выбрать пункт "Edit Breakpoint" для вывода диалога редактирования условий формирования прерывания.

Установка точки прерывания в коде

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

If (total_photos_diff > 300) { debugger; // запускаем отладчик и прерываем выполнение кода }

Другие способы прервать выполнение кода

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

Остановка при изменении DOM

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

На панели кода HTML при нажатии правой кнопки мыши на нужном элементе можно выбрать условия остановки кода (изменение атрибутов, добавление/удаление потомков, удаление элемента) при изменении DOM. Перегрузите код и при изменении элементов выполнение кода остановится.

Остановка при появлении всех или необрабатываемых исключений

Большинство инструментов разработчика позволяют останавливать выполнение скрипта при появлении исключений. В Chrome данный функционал может быть включен с помощью иконки "Pause " в нижней строке интерфейса.

Можно выбрать, для каких исключений будет выполняться остановка выполнения кода. Пример, приведенный ниже, демонстрирует одно необрабатываемое и одно обрабатываемое (блок try|catch) исключения:

Var t = 3, p = 1; function calcPhotos(total_photos, prev_total_photos) { var total_photos_diff = total_photos - prev_total_photos; // Первая группа console.info("Total difference is now " + total_photos_diff); // Обновляем значения t = t+5; p = p+1; // Необрабатываемое исключение if (total_photos_diff > 300) { throw 0; } // Обрабатываемое исключение if (total_photos_diff > 200) { try { $$("#nonexistent-element").hide(); } catch(e) { console.error(e); } } } setInterval(function() { calcPhotos(t,p); },50);

Введение в стек вызовов

Если ошибка появится при выполнении вашего скрипта, то выше описанные методы помогут остановить программу для анализа ошибки. Но не всегда сразу понятно, где скрывается причина.

Когда выполнение скрипта прерывается, обратите внимание на правую панель, на которой представлена полезная информация, среди которой содержится стек вызовов (Call stack).

Стек вызовов показывает полный путь, который привел к точке появления ошибки и остановки выполнения кода.

На представленном ниже рисунке ошибка намеренно сгенерирована в функции incrementValues() , что привело к остановке выполнения кода. инструмент разработчика показывает полный стек вызовов, что позволяет определить потенциально опасные места.

Заключение

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

Легко потеряться написания кода JavaScript без отладчика.

JavaScript Отладка

Трудно писать код JavaScript без отладчика.

Ваш код может содержать синтаксические ошибки или логические ошибки, которые трудно диагностировать.

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

Как правило, ошибки будут происходить, каждый раз, когда вы пытаетесь написать какой-то новый код JavaScript.

JavaScript Debuggers

Поиск ошибок в программном коде называется отладки кода.

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

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

С помощью отладчика, вы можете также установить контрольные точки (места, где выполнение кода может быть остановлен), и исследовать переменные в то время как код выполняется.

Обычно, в противном случае следуйте инструкциям, приведенным в нижней части этой страницы, вы включите отладку в браузере с помощью клавиши F12, и выберите "Консоль" в меню отладчика.

console.log() Метод

Если ваш браузер поддерживает отладку, вы можете использовать console.log() для отображения значений JavaScript в окне отладчика:

пример

My First Web Page

a = 5;
b = 6;
c = a + b;
console.log(c);

Установка точек останова

В окне отладчика, вы можете установить точки останова в коде JavaScript.

На каждой контрольной точке, JavaScript прекратит выполнение, и позволит вам исследовать значения JavaScript.

После изучения значения, вы можете возобновить выполнение кода (как правило, с помощью кнопки воспроизведения).

Отладчик Ключевое слово

Отладчик ключевое слово останавливает выполнение JavaScript и вызовы (если таковые имеются) функции отладки.

Это имеет ту же функцию, установив точку останова в отладчике.

Если отладка не доступна, оператор отладчик не имеет никакого эффекта.

С отладчик включен, этот код перестанет выполняться прежде, чем он выполняет третью строчку.

Основные браузеры "Инструменты отладки

Как правило, вы включите отладку в браузере с F12, и выберите "Консоль" в меню отладчика.

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

Chrome

• Откройте браузер.
• В меню выберите инструменты.
• И, наконец, выберите Console.

Firefox Firebug

• Откройте браузер.
• Перейти на веб-странице:
  http://www.getfirebug.com
• Следуйте инструкциям, как:
  установить Firebug

Internet Explorer

• Откройте браузер.
• В меню выберите инструменты.
• Из инструментов, выбрать инструменты для разработчиков.
• И, наконец, выберите Console.

Opera

• Откройте браузер.
• Перейти на веб-странице:
  http://dev.opera.com
• Следуйте инструкциям, как:
  добавить кнопку консоли разработчика на панель инструментов.

Safari Firebug

• Откройте браузер.
• Перейти на веб-странице:
  http://extensions.apple.com
• Следуйте инструкциям, как:
  установить Firebug Lite.

Safari Develop Menu

• Перейти к Safari, Настройки, Дополнительно в главном меню.
• Установите флажок "Включить Показать меню в строке меню Разрабатывать".
• Когда новая опция "Develop" появляется в меню:
  Выберите "Show Error Console".

Опубликовано: 26 марта 2013

Chrome Developer Tools — на мой взгляд, самый удобный инструмент веб-разработки. Он содержит в себе весь необходимый функционал для создания и отладки полноценных веб-приложений. Но с ним, как и с любым другим инструментом, нужно научиться работать. Начнем с основ.

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

Консоль дает разработчику доступ к ряду удобных и полезных функций. Рассмотрим основные из них:

console.log() , console.error() , console.warn() и console.debug()

Базовые функции вывода в консоль, позволяют выводить в консоль произвольные сообщения. Отличаются классификацией выводимых сообщений: error() помечает сообщения как ошибки, warn() помечает сообщения как предупреждения, debug() помечает сообщения как отладочные.

Эти функции принимают неограниченное количество параметров, что позволяет выводить несколько переменных подряд и даже склеивать их в целые предложения:

Console.log("Время регистрации:", 1121102802);

Также есть поддержка форматирования:

Console.log("Время регистрации: %d", 1121102802);

Поддерживаемые указатели формата:

// %s — строка console.log("%s", "Привет"); // %d, %i — целое число console.log("%d", 1337 / 42); // %f — число с плавающей запятой console.log("%f", 1337 / 42); // %o — элемент DOM console.log("%o", document.body); // либо console.dirxml(document.body); // %O — элемент JavaScript console.log("%O", document.body); // либо console.dir(document.body); // %c — вывод с заданием CSS стилей console.log("%cпривет %cмир", "color: red", "color: blue");

console.trace()

Выводит стек вызовов из точки в коде, где был вызван метод. Стек вызовов включает имена файлов и номера строк плюс счетчик вызовов метода trace() из одной и той-же точки.

console.assert()

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

Var two = 3; var three = 2; console.assert(two < three, "два меньше трех");

console.group() , console.groupCollapsed() и console.groupEnd()

Функции для группировки вывода. Функция group() открывает группу сообщений, в качестве параметра принимает название группы (поддерживается форматирование, как в console.log()), а функция groupEnd() закрывает последнюю открытую группу. Функция groupCollapsed() аналогична функции group() , но создаваемая группа сообщений свернута по умолчанию.

console.time() и console.timeEnd()

Функции для вычисления времени исполнения кода. Функция time() запускает таймер, а функция timeEnd() останавливает таймер и выводит его значение. Обе функции принимают название таймера в качестве обязательного параметра.

Фильтр сообщений

В правом нижнем углу на вкладке консоли расположен фильтр сообщений по типу. All соответствует всем сообщениям, Errors — ошибкам и выводу функции console.error() , Warnings — предупреждениям и выводу функции console.warn() , Logs — выводу функции console.log() , Debug — выводу функций console.debug() , console.timeEnd() и прочей информации.

Взаимодействие с другими вкладками debugger;

Когда браузер достигает строчки debugger; в любом коде, он автоматически останавливает выполнение скрипта в этой точке и переходит на вкладку Скриптов (Sources).

$() , $$() и $x()

Функции, упрощающие выборку элементов, работают только в консоли. Функция $() возвращает первый элемент, соответствующий переданному селектору. Вторым параметром можно передать контекст поиска:

$("head") // возвращает элемент head $("head", document.body) // возвращает null, потому что body не содержит элементов head

Функция $$() аналогична $() , но возвращает все найденные элементы:

$$("script") // возвращает все элементы script $$("script", document.body) // возвращает все элементы script, содержащиеся в body

Функция $x() возвращает все элементы, соответствующие выражению XPath. Вторым параметром можно передать контекст:

$x("//script") // возвращает все элементы script $x("script", document.body); // возвращает все элементы script, содержащиеся непосредственно в body

Многие JavaScript фреймворки определяют свою функцию $() , в связи с чем значение функций в консоли также меняется.

$0 — $4

Консоль хранит в памяти ссылки на последние пять элементов, выделенных во вкладке Элементов (Elements). Для доступа к ним используются переменные $0 , $1 , $2 , $3 и $4 . $0 хранит ссылку на текущий выделенный элемент, $1 — на предыдущий и так далее.

$_

Переменная $_ хранит результат отработки последней команды в консоли. Это позволяет использовать результат выполнения одной команды в другой команде. Попробуйте выполнить эти команды по очереди:

1337 / 42; console.log("%d", $_);

inspect()

Функция inspect() открывает переданный объект или элемент на соответствующей ему вкладке:

Inspect($("head script")) // откроет вкладку Elements и выделит первый тег script найденный внутри head