налагодження javascript


Здавалося б - так що тут розповідати? Все ж очевидно. Але питання це мені задають із завидною частотою. Та й мені є, що розповісти.

Наведу конкретні приклади і розповім, як я їх вирішую.

Бачимо ціль, не бачимо перешкод


Ось основні браузери і їх засоби налагодження:
  • Firefox:
    Всіма нами улюблений плагін Firebug
  • Safari. Chrome:
    Вбудований в WebKit Web Inspector
  • Opera:
    Чудовий вбудований Dragonfly
  • Internet Explorer 8:
    Вбудований Developer Tools
  • Internet Explorer <= 7
    Тут є безліч варіантів:
    DebugBar. Companion.JS. через MS Visual Studio ...
    Але мене всі ці штуки якось не зачепили - всі вони або громіздкі, або незручні, або платні :)
    А зачепив мене тільки Script Debugger. Він дуже спартанський, але в ньому є все, що мені потрібно.

У всіх цих засобах налагодження нас будуть цікавити breakpoint'и:

А ось трохи «смакоти» - conditional breakpoints (правий клік по «геп»):

Тобто заводимо глобальну змінну (наприклад) allowBreakpoints і «геп» будуть спрацьовувати тільки тоді, коли ми самі того захочемо.
На жаль, працює не скрізь, тому я це зазвичай не використовую.

Як «зупинитися» потік

Можна сміливо користуватися в:
  • Firefox з включеним Firebug'ом
  • Safari, Chrome з відкритим / включеним Web Inspector / Script Panel
  • Internet Explorer 8 з відкритим / включеним Developer Tools
  • Internet Explorer <= 7 с установленным Script Debugger
  • Opera з відкритим / включеним Dragonfly

І не бійтеся писати debugger в вашому коді - помилки це ніде не викличе.

А ось варіант з умовною зупинкою:
if (allowBreakpoints == true)
debugger;

* This source code was highlighted with Source Code Highlighter.
Мені так подобається набагато більше, ніж ставити «геп»: так я пишу код і дебажу його по суті в одному місці, а не в двох.

Debug через alert ()

особливість breakpoint'ов

Чому? Якщо в момент зупинки скрипта у вас був запущений AJAX-запит або Timeout, і відповідь не встиг повернутись - він може вже не повернуться ніколи. Погодьтеся, в сучасних web-проектах цього добра вистачає. Тому в момент «екстреної зупинки» скрипта ми вже не зможемо адекватно debug'ать далі - частина логіки буде безповоротно втрачено.

Тому я намагаюся уникати на практиці debug з зупинкою.

«Правильний» debug


Коротко: хороший debug - через logging. Так я в основному і працюю - в потрібному місці в потрібний час спрацьовує console.log (.).

Так, щодо console.log - вперше цей метод побачив світ, наскільки я пам'ятаю, разом з Firebug. Ніякий це не стандарт і не факт, що воно запрацює в IE6. Однак сучасні браузери вводять logging саме як console.log. Це так, до відома. І якщо в продакшн потрапить код з console.log (.) - будьте на чеку, може поламатися! Так що може бути варто перевизначити у себе в коді об'єкт console. так, на всякий пожежний.

Якщо ж в цільовому браузері немає console.log. а хочеться - спробуйте Firebug Lite або Blackbird. може сподобається;)

CASE:
Треба просто продебажіть якийсь код. Скажімо, подивитися, що відбувається після натискання кнопки або після AJAX-завантаження даних.

Тут складніше - треба знайти, з чого почати.

трохи мистецтва

// або просто
debugger;

* This source code was highlighted with Source Code Highlighter.











Звичайно даний спосіб не ідеальний. Буває, що дає промашки. Але це хороший спосіб, мені він сильно допомагає в роботі.

Так, значить місце в коді знайшли, геп поставили. Якщо не хочеться (або просто не можна) змінювати вихідний код - можна замість ключового слова debugger поставити brakepoint в засобі налагодження.

Отже:
  1. Шукаємо потрібне місце тим же способом
  2. Замість debugger пишемо console.log (variable_to_watch)

Тут є цікаві модернізації.


variable_to_watch - об'єкт, який змінився з моменту виведення в консоль. А хочеться побачити його стан саме на момент виклику.

Тут треба використовувати не console.log (variable_to_watch). а console.dir (variable_to_watch)


Потрібно не просто побачити поточне значення variable_to_watch. але ще і поекспериментувати з ним (наприклад, хочеться викликати його метод):
// нехай хочеться отримати доступ до об'єкта obj
if (debugEnabled)
console.log (window.temp_var = obj);

* This source code was highlighted with Source Code Highlighter.
Таким чином ми не тільки побачимо висновок в консолі, але і отримаємо доступ до об'єкта через глобальну посилання на нього: window.temp_var.

Відкриваємо Firebug-> Console і викликати метод: temp_var.objMethod ().

Що ж робити? Я роблю так:

Створюємо файл з патчем: my-ext-patch.js. і підключаємо його послеext-all.js
Усередині пишемо щось на кшталт: (function () var _backup = Ext.form.Form.render; // Резервуємо метод рендеру форми. - Ваш Кеп;)

Ext.form.Form.render = function (container) // А ось і дебаг
console.log (container);

// Можливі варіанти:
// console.dir (container);
// console.log (window.t = container);
// debugger;

// Виконуємо початковий метод
return _backup.apply (this. arguments);
>
>) ();

* This source code was highlighted with Source Code Highlighter.
Збочення? Можливо. Але мені подобається> :)

Сподіваюся, що мій досвід комусь допоможе.







Схожі статті