1. Консоль - загальний погляд
2. Дані виводимо в консоль
3. виділення повідомлень
4. Угруповання викликів методу .log ()
5. Переривання ходу виконання скрипта
6. Працюємо з точками переривання
7. Умовні точки переривання
8. Установка точки переривання в коді
9. Інші способи перервати виконання коду
10. Зупинка при зміні DOM
11. Зупинка при появі всіх або необроблюваних винятків
12. Введення в стек викликів
13. висновок

В останні кілька років завдяки появі різних бібліотек, таких як 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 не має коштів для різного представлення інформації в консолі.

Угруповання викликів методу .log ()

Використання різних методів для виведення інформації в консоль дозволяє представити дані в наочному вигляді. Подання інформації можна поліпшити за допомогою об'єднання в блоки. використовується метод 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 (), що призвело до зупинки виконання коду. інструмент розробника показує повний стек викликів, що дозволяє визначити потенційно небезпечні місця.

висновок

Даний урок є відправною точкою для більш детального вивчення документації по тому інструменту, яким ви плануєте активно користуватися.