Java Script підручник | Налагодження скриптів в браузері Chrome

1. Налагодження скриптів в браузері Chrome Доброго дня! Продовжуючи тему обробки помилок в JavaScript...
2. Загальні кнопки управління
3. точки зупинки
4. Зупинитися і озирнутися
5. управління виконанням
6. консоль браузера
7. Помилки в консолі
8. Разом

Налагодження скриптів в браузері Chrome

Наша взаимовыгодная связь https://banwar.org/

Доброго дня! Продовжуючи тему обробки помилок в JavaScript поговоримо про налагодження скриптів силами браузера. Для прикладу візьмемо найкращий браузер на Землі - Chrome.

В принципі такі інструменти є в будь-якому браузері, а якщо врахувати, що більша частина браузерів працює на одному двигуні, що і Chrome, то тут в принципі не буде особливих відмінностей. Також ще дуже хороший Firefox зі своїм інструментом Firebug.

Загальний вигляд панелі Sources

Запустіть браузер Chrome.

Натисніть F12, при цьому запустяться Інструменти розробника.

Перейдіть на вкладку Source

Тут можна виділити 3 зони:

1. Область вихідних файлів. У ній знаходяться всі файли проекту
2. Область тексту. У цій області знаходяться текст файлу
3. Область інформації та контролю. Про неї розмова піде пізніше

Як правило при налагодженні область вихідних файлів не потрібна, тому її можна приховати кнопкою.

Загальні кнопки управління

3 найбільш часто використовувані кнопки управління:

Формат

Ця кнопка дозволяє відформатувати код. Може вам знадобитися, якщо ви бажаєте відформатувати чужий код. Консоль Дуже важлива кнопка після натискання на якій відкривається консоль. В консолі можна вводити різні команди і оператори на JavaScript. Вікно У випадку з великою ділянкою коду дозволяє відкрити код в окремому вікні.

точки зупинки

Розглянемо на прикладі файлу pow.js. Якщо клацнути на будь-якому рядку цього файлу, то на цьому рядку буде задана точка зупинки.

Виглядати це приблизно так:

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

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

Інформація про точку зупину з'являється на вкладці Breakpoints.

Вкладка Breakpoints дуже корисна, коли код дуже великий, вона дозволяє:

• Швидко перейти на те місце коду, де поставлений брейкпойнт простим кліком на текст.
• Тимчасово відключити точку зупину кліком на чекбокс.
• Швидко видалити точку зупинки правим кліком на текст і вибором Remove.

Деякі додаткові можливості

• Правий клік на номері рядка pow.js дозволить вам створити так звану умовну точку зупину (conditional breakpoint), тобто задати умову, за якої точка зупинки спрацює.

Зупинитися і озирнутися

Оскільки наша функція виконується одночасно із завантаженням сторінки, то найпростіший спосіб активувати відладчик JavaScript - це перезавантажити її. Для цього натисніть F5. І при цьому виконання скрипта буде зупинено на 6-му рядку.

Зверніть увагу на інформаційні вкладки:

• Watch Expressions - тут можна побачити поточне значення змінних, які ви відстежуєте в скрипті.
• Call Stack - показує стек викликів - це все виклики призвели до цього рядка коду.
• Scope Variables - показує змінні. Причому показує як глобальні так і локальні змінні.

управління виконанням

А тепер давайте «поганяємо» скрипт і відстежимо його роботу. Зверніть увагу на панель зверху там знаходяться 6 кнопок роботу яких ми і розглянемо.

- продовжити виконання, або можна натиснути на клавішу F8. Ця кнопка продовжує виконання скрипта. Таким чином ми можемо крок за кроком проходити наш сценарій начебто він запускається в браузері. - зробити крок, не заходячи в функції, або клавіша F10.

Виконати один крок скрипта не заходячи при цьому всередину функції.

- зробити крок всередину функції, клавіша F11. Виконує один крок скрипта і при цьому заходить всередину функції. - виконувати до виходу з поточної функції, клавіша Shift + F11.

виконує повністю код, що знаходиться в функції.

- відключити / включити всі точки зупинки. Ця кнопка просто відключає і при повторному натисканні включає всі точки зупинки. - включити / відключити автоматичну зупинку при помилку. Дана кнопка дуже корисна при налагодженні і дозволяє включати і відключати автоматичну зупинку при помилку.

Сам процес налагодження полягає в покроковому проходженні програми і в спостереженні за значеннями змінних.

консоль браузера

При налагодженні коду скрипта буває корисним перейти на вкладку Console і подивитися чи немає там помилок також можна виводити інформацію в консоль за допомогою console.log ().

наприклад:

// результат буде видно в консолі for (var i = 0; i <6; i ++) {console.log ( "значення", i); }

Консоль доступна в будь-якому браузері

Помилки в консолі

Помилки JavaScript скриптів можна подивитися в консолі.

В консолі ви можете побачити:

Новий рядок - це власне повідомлення про помилку.

Якщо ви клікніть на посилання pow.js в консолі, праворуч в рядку з помилкою, то ви перейдете безпосередньо до того місця в скрипті, де ця помилка сталася.

Разом

Отладчик вам дозволяє:

• Зупинятися на зазначеному місці (точка зупинки) або по команді debugger.
• Виконувати код - налагоджувати програму по одному рядку або до певного місця.
• Відстежувати змінні, виконувати команди в консолі і т.п.

В інструментах розробника є й інші вкладки як Elements дозволяє дивитися HTML-код сторінки, Timeline показує скільки файлів завантажує браузер і скільки часу у нього на це йде. Але нам поки пов вкладки не дуже цікаві.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

також читайте