У цьому Посібнику ти навчишся, як ефективно працювати з Exception-Breakpoints у Chrome Developer Tools. Exception-Breakpoints дозволяють відлагодити твій JavaScript, автоматично призупиняючи програму, коли виникає виняток. Це особливо корисно, коли ти хочеш відстежити та зрозуміти помилки у коді: де вони виникають та чому. Використання точок зупинки є невід'ємною вмінням для кожного розробника, який хоче переконатися, що його код не має помилок. Давай зануримося безпосередньо у деталі!
Головні Висновки
- Exception-Breakpoints призупиняють виконання програми, коли виникає виняток.
- Ти можеш розрізняти між "Несхопленими" та "Схопленими" Винятками.
- Додавання вказівки debugger;- дає можливість зупинити програму в певному місці.
- Важливо після завершення відлагодження видаляти вказівки debugger;- з коду, щоб зберегти чистий продукційний код.
Крок за Кроком Інструкція
1. Активація Exception-Breakpoints
Щоб активувати автоматичну призупинку при винятках, відкрий Chrome Developer Tools. Перейди в меню "Sources" та знайди розділ "Breakpoints". Постав позначку на "Pause on Exceptions" та "Pause on Caught Exceptions".
Тепер програма автоматично призупиниться, коли виняток виникає. Ти можеш зробити це, використовуючи наступний код, який генерує простий виняток.
Після запуску коду програма зупиниться на місці, де виняток був викинутий.
2. Робота з "Схопленими" та "Не Схопленими" Винятками
Якщо відключити опцію для "Схоплених Винятків", ти помітиш, що програма не зупиняється на схоплених винятках.
Проте, якщо в коді є виняток у блоку try-catch, виняток буде схоплено в блоку Catch та програма продовжить виконання.
Тут ти можеш побачити, що виняток було схоплено, і ти можеш переглянути вивід консолі з помилкою, яка міститься у винятку.
3. Застосування до Кількох Точок Зупинки
Якщо у тебе є кілька точок зупинки у різних файлах, може швидко стати непереглядно. Проте, ти можеш легко вимкнути всі точки зупинки, клацнувши правою кнопкою миші на одній з них та вибравши опцію "Disable all Breakpoints".
Цим усі точки зупинки будуть вимкнуті, і ти зможеш активувати їх знову, якщо знадобиться.
4. Використання інструкції debugger;-
Ще однією корисною технікою при відлагодженні є вставка інструкції debugger;- у код. Це призводить до зупинки програми саме в цьому місці, як тільки ти перезавантажиш сторінку.
При використанні інструкції debugger;- важливо пам'ятати, що його слід видалити зі свого коду перед тим, як перейти до продукційного середовища, оскільки воно не є корисним у живій застосунковій програмі.
Якщо ти вставиш інструкцію debugger;-, програма зупиниться саме на цьому конкретному місці, що дозволить перевірити поточні змінні та історію виконання програми.
5. Заходи безпеки при Роботі з Винятками
При роботі з винятками слід бути обережним, особливо якщо використовуєш багато сторонніх бібліотек. Вони також можуть викликати винятки, і це може бути дратуюче, якщо твій код постійно зупиняється.
Якщо ви знаєте, що ваш додаток генерує виключення, корисно ввімкнути опцію "Необроблені винятки", щоб виявити їх під час процесу налагодження.
Пам'ятайте, що не кожне виключення веде до проблеми. Виняток може бути просто перехоплений і не негативно впливати на користувацький досвід.
Підсумок
У цьому керівництві ви дізналися, як використовувати точки зупинки виняток у Chrome Developer Tools для виявлення помилок у своєму JavaScript-коді. Ви побачили, як активувати ці точки зупинки та ефективно використовувати для того, щоб забезпечити плавну роботу ваших додатків. Розуміння та застосування цих технік значно підвищить вашу ефективність при налагодженні.
Часто задавані питання
Як активувати точки зупинки виняток у Chrome Developer Tools?Відкрийте Chrome Developer Tools, перейдіть до вкладки "Джерела" та вмикніть "Призупинити на винятках" та "Призупинити на перехоплених винятках".
В чому різниця між "Перехоплені" та "Необроблені" винятки?"Перехоплені винятки" - це ті, які обробляються у блоку try-catch, тоді як "Необроблені винятки" не перехоплюються і безпосередньо передаються обробнику помилок.
Як вимкнути всі мої точки зупинки?Натисніть правою кнопкою миші на будь-яку точку зупинки та виберіть "Вимкнути всі точки зупинки" у контекстному меню.
Що таке декілька-пропускач;-Заява та як її використовувати?Deugger;-Заява є командою JavaScript, яка зупиняє програму саме тут. Ви повинні вилучити її зі свого коду після налагодження.
Чому мені слід видалити заяву про налагодження перед тим, як ви прийдете в процес виробництва?Це може спричинити зупинку додатка у точці, яку ви не мали на увазі, і, таким чином, негативно вплинути на користувацький досвід.
