Отладчик — очень важный инструмент для фронтенд-разработки, он может останавливаться на интересующем нас коде и очищать логику, проходя через него. Качество отладчика напрямую связано с качеством точек останова.
И Chrome Devtools, и VSCode предоставляют отладчик и поддерживают 6 способов точки останова.
нормальная точка останова
Вы можете добавить точку останова, щелкнув в левой части строки, которую хотите разбить, и она сломается, когда вы запустите ее.
Это самый простой способ создания точек останова, и VSCode и Chrome Devtools поддерживают такие точки останова.
Условные точки останова
Щелкните правой кнопкой мыши в левой части строки кода, и появится раскрывающееся окно, в котором вы можете добавить условную точку останова.
Введите условное выражение, и когда оно дойдет до этой строки кода и значение выражения будет истинным, оно сломается, что более гибко, чем обычные точки останова.
Эта условная точка останова также поддерживается VSCode и Chrome Devtools.
Точки останова DOM
Щелкните правой кнопкой мыши соответствующий элемент в панели Elements Chrome Devtools и выберите break on, вы можете добавить точку останова dom, то есть он будет прерываться при изменении поддерева, изменении атрибута и удалении узла. Может использоваться для отладки кода, вызывающего изменения dom.
Поскольку он включает отладку DOM, только Chrome Devtools поддерживает такие точки останова.
точки останова URL
На панели «Источники» Chrome Devtools вы можете добавить точку останова URL-адреса XHR, которая будет прерываться, когда запрос ajax соответствует URL-адресу, который можно использовать для отладки кода, связанного с запросом.
Эта функция доступна только в Chrome Devtools.
Точка останова прослушивателя событий
На панели «Источники» Chrome Devtools вы также можете добавить точку останова прослушивателя событий, чтобы указать точку останова при возникновении события, которую можно использовать для отладки кода, связанного с событием.
Эта функция также доступна только в Chrome Devtools.
точка останова исключения
Отметьте Uncaught Exceptions и Caught Exceptions на панели отладчика VSCode, чтобы добавить точки останова исключений и разбить столбец при возникновении исключения, которое не перехвачено или перехвачено. Полезно для отладки некоторого кода, в котором возникают исключения.
Суммировать
В дополнение к обычным точкам останова, которые устанавливаются непосредственно в соответствующей строке кода, существует множество способов добавления точек останова в соответствии с различными ситуациями.
Существует шесть типов:
- нормальная точка останова: остановись на этом месте
- Условные точки останова: выполнить до этой точки, и выражение истинно до разрыва, более гибкое, чем обычные точки останова
- Точки останова DOM: изменения поддерева DOM, изменения атрибутов и узлов прерываются при их удалении, что можно использовать для отладки кода, вызывающего изменения DOM.
- точки останова URL: остановить, когда URL-адрес соответствует определенному шаблону, который можно использовать для отладки кода, связанного с запросом.
- Точка останова прослушивателя событий: перерыв при срабатывании прослушивателя событий, который можно использовать для отладки кода, связанного с событиями.
- точка останова исключения: когда возникает исключение и перехватывается или не перехватывается, оно прерывается, что можно использовать для отладки кода, в котором возникло исключение.
Большинство этих методов точки останова поддерживаются Chrome Devtools (обычный, условный, DOM, URL, прослушиватель событий, исключение), а некоторые поддерживаются отладчиком VSCode (обычный, условный, исключение).
Код в разных ситуациях может использовать разные точки останова, что делает отладку кода намного эффективнее.
Шесть методов точки останова JS, сколько вы использовали?