Ця фраза здатна зачепити за тонкі струни душі будь-якого розробника, і тим більше тестувальника: «Не кодь сьогодні того, що не зможеш продебажити завтра». На щастя, є інструменти, які дозволяють проводити дебагінг з легкістю. Час кодити, а час дебажити! Отже, після того, як ми ознайомили вас із перевагами поєднання представників «сімейства» JavaScript — Angular і Node.js — із Drupal, хотілось би звернути вашу увагу на корисний інструмент для дебагінгу (також відомого як відлагодження або зневадження) JavaScript. Це навіть не інструмент, а набір інструментів під назвою Chrome Dev Tools.
DevTools для дебагінгу JavaScript: з чого почати
Chrome DevTools — один із найбільш сучасних «помічників» у пошуку, аналізі та виправленні багів. У нього можна зайти наступними способами:
- Клікнути “More Tools” у правому верхньому меню і обрати “Developer Tools”.
- Використати клавішу F12 на клавіатурі.
- Застосувати комбінації клавіш Ctrl + Shift + I або Cmd + Opt + I для Mac.
- Клікнути на потрібний елемент правою мишкою і обрати “Inspect element”.
Гарний початок! Тепер давайте розглянемо хоча б декілька можливостей DevTools для дебагінгу JavaScript.
Встановлення брейкпойнтів
Надзвичайно важливий пункт у дебагінгу JavaScript — встановлення брейкпойнтів. Це дозволяє вам зупиняти виконання коду на конкретній точці і перевіряти усе, що вам потрібно.
Один із способів поставити брейкпойнт — знайти потрібний файл у вкладці “Sources”, обрати потрібний рядок коду в секції, що містить код, і клікнути лівою мишкою на номер рядка. Він повинен змінити колір.
Якщо вам не потрібно, щоб брейкпойнти працювати весь час, ви можете обрати:
- Брейкпойнти, які залежать від певної умови — для цього клікніть правою мишкою на номер рядка і оберіть “Edit breakpoint”.
- Брейкпойнти, які залежать від певної події. Ви можете обрати ці події в Sources — Event Listener Breakpoints.
Step over, step into, step out: впевнено крокуємо по коду
Працюючи з брейкпойнтами для дебагінгу JavaScript, ви будете часто використовувати зручну панель з інтуїтивно зрозумілими іконками. З їх допомогою ви можете зупиняти/відновлювати дебагінг, робити кроки по коду, деактивувати брейкпойнти і зупиняти виконання коду у разі виникнення винятків.
- Кнопка, що нагадує усі класичні кнопки pause/play, призначена для зупинення /відновлення виконання скрипта.
- Кнопка з зігнутою стрілою дає можливість переступити через наступний виклик функції (stepping over).
- Кнопка зі стрілою донизу веде вас в наступний виклик функції (stepping into).
- Кнопка зі стрілою догори виводить вас із поточної функції (stepping out).
Відновлення зменшеного коду
Від зменшення коду JavaScript виграє швидкість сайту чи додатку, а от дебагінг стає більш проблемним. Рішення є! Якщо ви маєте справу з мініфікованим кодом, використовуйте опцію DevTools під назвою “Pretty Print”, яка відновить його до звичного вигляду. Оберіть файл і натисніть на іконку з фігурними дужками — { }.
Це були лише декілька порад для вашого натхнення. А насправді можливості JavaScript-дебагінгу з DevTools набагато більші. Бажаємо вам насолоджуватись плідним процесом дебагінгу, але не знаходити надто багато багів ;) А якщо вам потрібна допомога з дебагінгом, або ви хотіли би крутий, потужний і швидкий додаток чи сайт, довіртеся нашим розробникам!