Firebug: Part 3 — debugging

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

Весь цикл: Console, Commands, Debugging ,Profiling



Сегодня заглянем на сайт jQuery.

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

В меню выберем там скрипт custom.js.

Перейдем на строку 212.


И установим точку останова(breakpoint).


Перейдем к строке 201, и поставим точку останова с условием(для этого нажмем правой кнопкой мыши).


Посмотреть все точки можно на вкладке Breakpoints.


А теперь самое интересное. Нажмем на кнопку «RUN CODE» на сайте и попадем в нашу точку останова
(если навести курсор на объект в коде, то можно увидеть его значение, что очень удобно).


На вкладке Watch мы можем посмотреть любой объект в «замороженном» состоянии.


А также добавить новый объект.


А на вкладке Stack мы видим stack trace нашей функции(функции из которых была вызвана наша функция).


Также мы обратили внимание, что сейчас у нас загорелись четыре кнопки:
(слева-направо) Run(Продолжить F8), Step Into(Зайти внутрь F11), Step Over(На следующую строку F10), Step Out(Выйти из функции).

Благодаря этим кнопкам мы можем ходить по коду и смотреть, что и где у нас пошло не так.

Статья основана на Firebug Javascript и блоге Michael Sync.

* This source code was highlighted with Source Code Highlighter.

P.S. к сожалению на скриншотах нету мышки, но я думаю — это не проблема