Налагодження JavaScript у Chrome - як зберегти точки розриву між оновленням сторінки або розривом за допомогою коду?

Коли я використовую Chrome та його налагоджувач JavaScript, кожного разу, коли я перезавантажую свою сторінку / сценарії, мої точки зупинки втрачаються, і мені потрібно знайти файл скрипта у спливаючому вікні, знайти рядок коду для моєї точки зупинки, клацнути, щоб додати його тощо

Чи є спосіб зберегти ці точки зупинки, щоб вони зламалися навіть після оновлення сторінки (інші налагоджувачі, якими я користувався, роблять це)?

Як варіант, чи є в моєму коді JavaScript чистий спосіб, я можу ввести щось, щоб сказати chrome почати трасування (зробити паузу в рядку)?

Можна поставити

debugger;

зламати у більшості середовищ JavaScript. Вони збережуться точно. Добре мати мініфікатор, який позбавляє відладчика та викликів console.log для виробничого середовища, якщо ви їх використовуєте.

В останніх версіях браузера Chrome є опція "Зберегти журнал" у верхній частині панелі консолі, поруч із фільтрами. У старих версіях правою кнопкою миші на порожньому вікні консолі з’явиться ця опція («Зберегти журнал при навігації»). Це зручно, коли у вас немає операторів console.log або жорстко закодованих викликів налагоджувача.

оновлення: я знайшов інструмент на github, який називається димохід , який бере файл і видаляє всі дзвінки console.log. це дає гарне уявлення про те, як видалити виклики налагоджувача.

Встановіть точки зупинку, перейдіть на вкладку Мережа та виберіть перемикач Зберегти журнал при навігації . Тепер точки зупинку повинні бути там, коли ви оновлюєтесь.

Або спосіб JavaScript

debugger;

Крім того, ви надсилаєте свої файли JavaScript із сервера на клієнт із вкладеним параметром запиту до URL-адреси з поточним часом епохи ? Це використовується для запобігання кешуванню файлів JavaScript.

У цьому випадку здається, що Chrome Developer Tools інтерпретує файл як інший після оновлення, що (правильно) видалить точки зупинки.

Для мене видалення параметра запиту змусило CDT зберегти точки зупинки після оновлення.

Це, мабуть, відбувається для сценаріїв, які ви динамічно завантажуєте або оцінюєте з інших сценаріїв? Я можу сказати для себе, що цей сценарій насправді дратував, поки я не виявив властивість sourceURL. Розміщення наступного спеціально відформатованого коментаря в останньому рядку сценарію, який ви хочете налагодити, "закріпить" його в Chrome, тому він має для цього систему відліку:

// # sourceURL = ім'я файлу.js

Точки зупинки, розміщені вручну, тепер зберігатимуться між завантаженнями сторінки! Конвенція насправді виникла із специфікації вихідної карти, але Chrome принаймні шанує її як самостійний прийом. Ось посилання .

Для людей, які використовують ExtJs 6.x:
замість disableCaching в Ext.Loader ви можете додати "кеш" або "disableCacheBuster" параметр запиту до URL-адреси сторінки. Це видалить параметр "_dc" з файлу і дозволить chrome-налагоджувачу зберігати точку зупинки.

Дивіться bootstrap.js у вашому додатку (параметр конфігурації disableCaching).

Ви можете використовувати debugger;вираз у своєму джерелі, щоб зробити там налагоджувач.

Інструменти розробника Chrome повинні поводитися так, як ви очікуєте, але ви можете вставити debugger;оператори у свій (розробний!) Код, щоб призупинити виконання.

Ви можете поставити налагоджувач; перед кодом, де потрібно розпочати налагодження. Як тільки сторінка почне завантажуватися, вона зупиниться на налагоджувачі; заява. Тоді ви можете легко застосувати точку налагодження відповідно до ваших вимог.