Здавалося б - так що тут розповідати? Все ж очевидно. Але питання це мені задають із завидною частотою. Та й мені є, що розповісти.
Наведу конкретні приклади і розповім, як я їх вирішую.
Бачимо ціль, не бачимо перешкод
Ось основні браузери і їх засоби налагодження:
- 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 в засобі налагодження.
Отже:- Шукаємо потрібне місце тим же способом
- Замість 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.
Збочення? Можливо. Але мені подобається> :)
Сподіваюся, що мій досвід комусь допоможе.