Подробный гайд по отладке кода на JavaScript в Chrome Devtools. Остановка при появлении всех или необрабатываемых исключений. Ошибка три: таинственная переменная «prop»

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

К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере - на первый взгляд.

В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code .

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков . Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js (как это делаю я ). Или воспользоваться плагином под Visual Studio Code под названием Live Server .

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео - Live Server Extension in Visual Studio Code .

Примечание переводчика: видео на английском языке.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью - вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

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

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

После установки точки останова (breakpoint ) в коде, как правило, есть несколько вариантов дальнейших действий:

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

У вас также будет доступ к просмотру стека вызовов (call stack ). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере ​​Google Chrome , добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:

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

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources .

Вкладка Sources

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

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

Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова .

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

Точка останова - преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова , нужно выполнить клик мыши на gutter  - поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local ), глобальная область видимости (Global ) и раздел сценариев (Script ).

В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:

Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log() .

Вкладка Watch

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

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

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

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack ) и т. д.

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

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

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint ), которая будет срабатывать только при выполнении определенного условия.

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

Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием -  usernameInput.text === "" :

В случае отладки приложения Quick Chat , если вы нажмете кнопку входа в систему без имени пользователя, будет запущена эта точка останова . В противном случае код будет продолжать выполняться как обычно.

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

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome:

Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug ).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome - переменные , стек вызовов , точки останова :

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

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

VS Code хранит конфигурацию отладки в файле launch.json внутри папки.vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки.vscode

Затем из этого списка выберите пункт «Chrome».

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

отладка JavaScript

Средства отладки не трудно писать программы JavaScript.

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

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

средства отладки JavaScript

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

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

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

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

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

Метод console.log ()

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

примеров

Мой первый веб-страницы

а = 5;
б = 6;
с = а + Ь;
console.log (с);

Установить точку останова

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

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

После того, как проверка будет завершена, вы можете повторно запустить код (например, кнопка Play).

отладчик ключевых слов

отладчик ключевое слово, чтобы остановить выполнение JavaScript, и вызывать функции отладчика.

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

Если нет отладки имеется, отладчик оператор не будет работать.

Открытый отладчик, выполнение кода останавливается перед третьей линии.

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

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

Каждый браузер, выполните следующие действия:

браузер Chrome

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

Firefox браузер

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

Браузер Internet Explorer.

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

опера

• Откройте свой браузер.
• Opera встроенный в средства отладки для Стрекоза, подробное описание можно найти на странице посещений:
  http://www.opera.com/dragonfly/.

сафари

• Откройте свой браузер.
• Щелкните правой кнопкой мыши и выберите Просмотр кода элемента.
• Выберите "Панель управления" в нижней части всплывающего окна.

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

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

Отладка js и CSS

Изначально эту статью я хотел посвятить только тому, что касается отладки js сценариев. Но после написания, оказалось что, вопрос CSS отладки очень сильно связан с этими же отладчиками, поэтому создавать отдельную статью про CSS отладку просто не имеет смысла.

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

CSS отладка - это важная составляющая кросс-браузерности вашего сайта. При верстке дизайна сайта верстальщики тестируют страницы в основных браузерах. Основная цель CSS отладки это одинаковое визуальное отображение страниц сайта во всех основных браузерах.

Под каждый браузер существуют специальные инструменты для отладки js сценариев и одновременно CSS отладки. Эти инструменты - специальные утилиты написанные под конкретный браузер. Поэтому отлаживать свои js скрипты Вам придется только под одним браузером, так как каждый браузер имеет свою утилиту.

Браузер	Инструменты для отладки js сценариев
	Firebug
	Firebug Lite, Dragonfly Opera 9.5 и выше
	Firebug Lite Существует, также, очень мощный инструмент для разработки и отладки MS Visual Studio , но этот инструмент очень притормаживает и может выдавать ошибку в течении 5-7 сек. IE 8 имеет встроенные Developer Tools (для отладки в IE 7 есть режим симуляции)

Самым популярным и удобным инструментом большинство считают Firebug для браузера Firefox. И в практической разработке js сценариев я тоже использую эту утилиту. Из всех представленных выше инструментов Firebug наиболее удобный в использовании и функциональней.

На изображение показана часть консоли Firebug"а.
Вкладка "Консоль " самая важная - на ней построчно отображаются ошибки выявленные во время выполнения js сценариев. В строке отображается причина ошибки, а справа название файла и номер строки. При нажатии на кнопку "Профилировать" она перейдет в нажатое состояние. Если Вы отожмете ее, появится таблица с перечнем функций которые выполняются браузером в реальном режиме. Будет показано названия функций, количество вызовов и время выполнения этих функций за промежуток пока было удержана кнопка "Профилировать ".
Второй по важности можно считать вкладку "Сценарий ". Здесь Вы можете увидеть внутренний код любого выбранного js файла. На вкладке, также доступны такие интересные параметры:

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

Вкладка "Сеть " отображает список загруженных скриптов. Если нажать на любой файл, то будет показана информация про обмен заголовками между браузером и сервером, а также содержимое js скрипта. В строке, также отображается размер и время загрузки скрипта.
Это может быть полезно не только при отладке сценариев, а и для ускорения загрузки страницы. Можно просматривать размеры рисунков, подгружаемых js сценариев и оценивать время затраченное на загрузку каждого элемента страницы. Цветовая гамма загрузки помимо отображения времени на загрузку элемента (страницы), времени DNS запроса и времени HTTP запроса, также показывает время ожидание ответа сервера. Или другими словами, время выполнения кода php.

Кроме всего, Firebug позволяет отслеживать ajax запросы, просматривать заголовки ответов и опять же оценивать время запросов.

Помимо всего Firebug имеет командную строку, которую при желании можно увеличить в окно произвольного размера и в нем вживую писать и сразу выполнять любой js код.
Разработчики Firebug создали специальную версию Firebug Lite, которая позволяет отлаживать js сценарии во всех других основных браузерах (Opera, IE, Safari). Правда эта версия немного урезана, но это все равно лучше чем ничего. Ну, и помимо самой отладки js сценариев, доступны также CSS отладка и структура DOM страницы. Выполнение js событий (onclick, onmousemove и т.д.) позволяет в реальном времени отслеживать изменения в HTML коде страницы и DOM документа. Измененные части html кода мгновенно подсвечиваются.
Если Вы выберите элемент страницы и нажмете на вкладку "Макет", то сможете увидеть как элемент позиционируется на странице, а вкладка "Стиль" отобразит все активные и переопределенные свойства элемента (перечеркнутое свойство).

Свойство переопределяется по последнему установленному значению по приоритетности места его назначения.

Opera Dragonfly

В целом Dragonfly тоже неплохой отладчик, но с первой попытки начать отладку у меня не получилось. При тестовой попытке отладить js сценарий, консоль ошибок почему-то упорно оставалась чистой, хотя в скрипте была допущена синтаксическая ошибка и, принудительно, отображалось окно "Консоль ошибок" с указание строки с ошибкой. Как оказалось, для каждой страницы необходимо было заново перезапускать Dragonfly.

По сути отладка js сценариев в Dragonfly это всего лишь дублирование информации об ошибке в "Консоле ошибок" в консоли самого Dragonfly.

Помимо этого, Dragonfly представляет обширные возможности по CSS отладки страницы. Как по мне, то немного проще для восприятия, чем в Firebug. Помимо позиционирования элемента в странице, Dragonfly предлагает просмотр отдельную вкладку "Рассчитанный стиль" в которой отображается все существующие свойства элемента и вкладку "Стили" со свойствами элемента разбитыми по классам.

Тогда как, Firebug на вкладке "Показать вычисленный стиль" отображает все свойства без цветового оформления. Однако, по сравнению с Firebug, изменение CSS свойств и просмотр изменений в реальном времени в Dragonfly недоступно. Каких-либо особенностей Dragonfly в отличие Firebug по отладке js сценариев нет. Есть также отображение Ajax запросов, заголовки обмена данные между клиентом и сервером, время запроса. Однако указывается лишь полное время запроса без детализации. При работе с Dragonfly складывается впечатление, что он немного притормаживает. Сравнение быстродействия консолей, показало что Dragonfly таки напрягает процессор больше, хоть и незначительно.

К минусам можно отнести то, что для отладки js сценариев не предусмотрено профилирование.

IE Developer Tools

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

К особенностям, которых нет в других отладчиках, можно отнести:
- возможность изменять размер страницы под популярные расширения (1024х768, 1280х768б 1280х1024 и другие);
- при профилировании "Создание/Остановка профилей " названия функций, количество вызовов и время выполнения этих функций за промежуток можно вывести в виде дерева. Что позволяет удобно отследить очередность и вложенность вызовов функций. Firebug позволяет выводить только общий список вызванных функций;
- функция "вид -> источник -> исходный код элемента со стилем" выводит в отдельном окне html код выделенного элемента вместе со всеми это css стилями. Это может быть особенно полезно, если Вам вдруг понадобится взять с другого сайта часть страницы вместе с сss стилями.
К минусам можно отнести то, что в IE Developer Tools отсутствует панель для отслеживания запросов, поэтому отследить количество запросов и скорость загрузки не получится.
Как известно, IE это самый отстающий от спецификаций браузер. При верстке дизайна IE больше всех требует внимания и поиска решений для правильного отображения элементов страницы. Поэтому к большому плюсу IE Developer Tools можно отнести возможность проверять совместимость страницы в IE 7.

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

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

1074

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

Визуальная отладка

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

Консоль API – это объект (console), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug Как отслеживать события

Firefox - Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

Тормозит - вне работы выключать