Хитрости отладчика Chrome, о которых вы не знали. День 16: контрольные точки

внешний интерфейс Chrome
Хитрости отладчика Chrome, о которых вы не знали. День 16: контрольные точки

специальное заявление

Эта статья является авторомТомек СулковскиОпубликовано вmediumряд выше. По словам автора, всего 24 статьи, которые обновлены до 24 декабря.
Авторские права принадлежат оригинальному автору.

Автор рекомендует наш китайский перевод в Твиттере, скриншот в конце

Переводчик связался с автором перед переводом и получил разрешение на перевод всей серии.
Чтобы не мешать вашему чтению,Авторизованные записи здесь

текст

За 24 дня до праздников я опубликую серию коротких статей о том, как более интересно использовать инструменты разработки,вчерау нас есть немногоtipsГость, сегодня мы рассмотрим несколько способов запуска точек останова.

45. Точки останова DOM

Некоторые сценарии будут измененыDOMЧасть, не уверена, какая часть модифицировать? Не уверен, когда это было пересмотрено? добавить одинDOMточка останова. Затем вы можете слушать добавленные или удаленные узлы или недвижимость.

Точки останова запоминаются при перезагрузке страницы. Когда вы устанавливаете одну или несколько точек останова, вы можете забыть, где они находятся. Как их найти? для достижения этой цели,ElementsВ представлении есть визуальные подсказки,SourcesСуществуют также специальные списки в .

Не беспокойтесь о том, что элементы, к которым вы добавили точки останова, будут скрыты в каком-то свернутом родительском элементе — они будут вElementВыделено посередине.

46. ​​Обозреватель мутаций

Этот совет относится кDevToolsНе совсем по теме, но, поскольку это дополнение к предыдущему совету, надеюсь, вы простите за отступление.

в любом случае, ты знаешьMutationObserver? Это просто часть API браузера, которая позволяет делать такие вещи, как вышеупомянутые.DOMМониторинг как точки остановаchildList , attributesа такжеsubtreeаналогичные изменения

Но на этот раз от вашегоJavaScriptв коде. и хорошо поддерживается даже вIE11середина.

Точки останова XHR/выборки

когда вы хотите захватить отправленное“ajax”конкретный момент в запросе, можно использоватьXHR/fetch breakpoint. Это могут быть толькоSourceНастройки панели. (Я тоже надеюсьNetworkможно задать в панели, но ее нет)

Вы можете добавить разделыURLВ качестве триггера или прослушивания любого запроса:

Сегодняшняя подборка здесь~

Рутина: Если вы узнали что-то новое здесь

→ Можешь поставить лайк и уйти~
→ Следуй за мной:Твиттер: Томек Сулковски

другая серия

Другие статьи из этой серии будут переведены в ближайшее время, а соответствующие ссылки будут размещены здесь.

напиши в конце

Если вы положительно относитесь к моему переводу, вы также можете подписаться на меня~ Кстати, мой опенсорсный проект, прошу волну звезд→посмотри сюда, красивая система блогов

Автор рекомендует наш китайский перевод в Твиттере

Категории