предисловие

Инструменты разработчика Chrome (сокращенно DevTools) — это набор инструментов веб-разработки и отладки, встроенных в браузер Google Chrome. DevTools дает разработчикам более полное представление о внутреннем устройстве браузера и приложениях, которые они пишут. Используя DevTools, вы можете более эффективно обнаруживать проблемы с макетом страницы, устанавливать точки останова JavaScript и лучше понимать оптимизацию кода.

В этой статье рассказывается о 24 навыках отладки Chrome и некоторых сочетаниях клавиш, которые помогут вам узнать больше о Chrome DevTools~

Советы по отладке

1. Прямой доступ к элементам страницы в консоли

Выберите элемент на панели элементов, затем введите в консоли$0, вы получите элемент, который вы только что выбрали в консоли. Если страница уже содержит jQuery, вы также можете использовать$($0)сделать выбор.

Вы также можете сделать обратное: щелкните правой кнопкой мыши элемент DOM, выводимый консолью, и выберите «Показать на панели элементов», чтобы просмотреть его непосредственно в дереве DOM.

2. Доступ к последним результатам консоли

Введите в консоли$_Вы можете получить последний вывод из консоли.

3. Доступ к недавно выбранным элементам и объектам

В консоли хранятся 5 последних выбранных элементов и объектов. При выборе элемента на панели «Элементы» или объекта на панели «Анализатор» записи сохраняются в стеке. можно использовать$xДля работы со стеком истории x начинает отсчет с 0, поэтому$0представляет последний выбранный элемент,$4Представляет последний выбранный элемент.

4. Выберите элементы

• $()- Возвращает первый элемент, который удовлетворяет указанному правилу CSS, этот метод является упрощением document.querySelector().

• ?()- Возвращает все элементы, удовлетворяющие заданным правилам CSS, этот метод является упрощением метода querySelectorAll().

• $x()- Возвращает все элементы, удовлетворяющие указанному XPath.

5. Используйте console.table

Эта команда поддерживает вывод информации журнала в табличной форме. При выводе сложной информации проще использовать console.table вместо console.log.

6. Используйте console.dir, который можно сократить как dir

Команда console.dir(object)/dir(object) может отображать все свойства объекта параметра object.

7. Скопируйте копию

Вы можете скопировать то, что хотите, в консоли с помощью метода копирования.

8. Получите ключи значения ключа объекта (объект)/значения (объект)

9. Функциональный монитор (функция)/немонитор (функция)

монитор(функция) при вызове указанной функции выводит на консоль сообщение с указанием имени функции и аргументов, переданных функции при ее вызове.

Используйте unmonitor(function), чтобы прекратить мониторинг указанной функции.

10. Прослушиватель событий monitorEvents(object[ events])/unmonitorEvents(object[ events])

monitorEvents(object[ events]), когда одно из указанных событий происходит на указанном объекте, объект события будет зарегистрирован на консоли. Тип события может быть указан как отдельное событие или как массив событий.

unmonitorevent(object[ events]) Останавливает мониторинг событий для указанного объекта и события.

11. Отнимающий много времени мониторинг

Таймер можно запустить, вызвав time(). Вы должны передать строковый параметр, чтобы однозначно идентифицировать идентификатор таймера. Если вы хотите остановить таймер, вы можете вызвать timeEnd() и передать указанное имя. После того, как таймер закончится, консоль напечатает имя таймера и конкретное время.

12. Анализ производительности программы

В консоли окна DevTools вызовите console.profile(), чтобы запустить профилировщик ЦП JavaScript.Чтобы завершить профайлер, вызовите console.profileEnd().

Конкретный анализ производительности будет в панели анализатора

13. Подсчитайте время выполнения выражения

Метод count() используется для подсчета количества выполнений выражения и принимает строковый параметр для маркировки различных токенов. Если одна и та же строка передается дважды, метод накапливает счетчик.

14. Очистить историю консоли

Историю консоли можно очистить:

• Щелкните консоль правой кнопкой мыши или щелкните, удерживая нажатой клавишу Ctrl, и выберите «Очистить консоль».
• Введите clear() в окне скрипта для выполнения.
• Вызовите console.clear() в скрипте JavaScript.
• Используйте сочетание клавиш Cmd + K (Mac) Ctrl + L (Windows и Linux).

15. Асинхронные операции

async/await делает асинхронные операции проще и читабельнее. Единственная проблема заключается в том, что await необходимо использовать в асинхронных функциях. Chrome DevTools поддерживает прямое использование await.

16. точки останова отладчика

Иногда нам нужно разбить точку для пошаговой отладки.Как правило, мы выбираем точку разбивки непосредственно в консоли браузера, но нам нужно перейти к источникам, чтобы сначала найти исходный код, а затем найти строку кода, которая нужна быть сломанным, что более хлопотно.

Используя ключевое слово debugger, мы можем определять точки останова прямо в исходном коде, что намного удобнее.

17. Скриншоты

Нам часто нужно делать снимки экрана. Chrome DevTools предоставляет 4 метода создания снимков экрана, которые в основном соответствуют нашим потребностям. Сочетание клавиш — ctrl+shift+p , откройте меню команд, введите снимок экрана, и вы увидите следующие 4 варианта:

Иди пробуй, это вкусно!

18. Переключение тем

Chrome предоставляет две темы, светлую и темную, когда вы визуально устали, вы можете переключиться, сочетание клавиш Ctrl + Shift + P, открыть меню команд, ввести тему, вы можете выбрать переключение

19. Копировать выборку

Все запросы на вкладке «Сеть» можно скопировать как полный код запроса Fetch.

20. Переопределение переопределений

При отладке css или javascript в Chrome DevTools все изменения будут сброшены при повторном обновлении страницы с измененными значениями свойств.

Если вы хотите сохранить измененное значение и не сбрасывать его при обновлении страницы, взгляните на следующую функцию (Переопределения). Переопределение отключено по умолчанию и должно быть включено вручную.Для его включения выполните следующие действия.

Включенные операции:

Откройте вкладку «Источники» в Chrome DevTools.
Выберите подвкладку «Переопределения»
Выберите + Выберите папку для переопределений, чтобы установить каталог для переопределений для хранения свойств переопределения.

21. Живое выражение

Поскольку Chrome70 мы можем поставить динамическое выражение над консолью для контроля его значения в режиме реального времени. Частота выполнения живого выражения составляет 250 миллисекунд.

Щелкните значок глаза «Создать живое выражение», чтобы открыть интерфейс динамического выражения и ввести выражение для мониторинга.

22. Проверить анимацию

Инспектор анимации Chrome DevTools служит двум основным целям.

• Проверьте анимацию. Вы хотите замедлить воспроизведение, воспроизвести или проверить исходный код группы анимации.

• Изменить анимацию. Вы хотите изменить время, задержку, продолжительность или смещение ключевого кадра группы анимации. Редактирование кривых Безье и ключевых кадров в настоящее время не поддерживается.

Инспектор анимации поддерживает анимацию CSS, переходы CSS и веб-анимацию. Анимация ProwelsimationFrame в настоящее время не поддерживается.

Клавиша ярлыка Ctrl + Shift + P, Открытое командное меню, Тип ящика: Показать анимацию.

23. Прокрутите в поле зрения

24. Редактируйте файлы с помощью рабочих областей

Рабочие пространства позволяют сохранять изменения, внесенные в Chrome Devtools, в локальную копию тех же файлов на вашем компьютере.

Перейдите в меню «Источники», в разделе «Файловая система» нажмите «Добавить папку в рабочую область», чтобы добавить рабочий каталог для синхронизации.

горячая клавиша

Посетите DevTools

Посетите DevTools	Windows	Mac
Откройте Инструменты разработчика (последнее закрепленное меню)	F12, Ctrl + Shift + I	Cmd + Opt + I
Открыть/переключить режим проверки элемента и окно браузера	Ctrl + Shift + C	Cmd + Shift + C
Откройте Инструменты разработчика и сосредоточьтесь на консоли.	Ctrl + Shift + J	Cmd + Opt + J

Глобальные сочетания клавиш

Следующие сочетания клавиш доступны на всех панелях DevTools:

Глобальные сочетания клавиш	Windows	Mac
следующая панель	Ctrl + ]	Cmd + ]
предыдущая панель	Ctrl + [	Cmd + [
Изменить местоположение дока DevTools	Ctrl + Shift + D	Cmd + Shift + D
Открыть режим устройства	Ctrl + Shift + M	Cmd + Shift + M
переключить консоль	Esc	Esc
обновить страницу	F5, Ctrl+R	Cmd + R
Обновлять страницы, которые игнорируют кешированный контент	Ctrl + F5, Ctrl + Shift + R	Cmd + Shift + R
Поиск текста в текущем файле или панели	Ctrl + F	Cmd + F
Искать текст во всех источниках	Ctrl + Shift + F	Cmd + Opt + F
Поиск по имени файла (кроме временной шкалы)	Ctrl + O, Ctrl + P	Cmd + O, Cmd + P
Увеличение (когда фокус находится в DevTools)	Ctrl + +	Cmd + Shift + +
уменьшить	Ctrl + -	Cmd + Shift + -
Восстановить размер текста по умолчанию	Ctrl + 0	Cmd + 0
Откройте командное меню	Ctrl + Shift + P	Cmd + Shift + P

приставка

ярлыки консоли	Windows	Mac
Предыдущая команда / линия	стрелка вверх	стрелка вверх
следующая команда/строка	стрелка вниз	стрелка вниз
сосредоточиться на консоли	Ctrl + `	Ctrl + `
очистить консоль	Ctrl + L	Cmd + K
многострочный ввод	Shift + Enter	Shift + Enter
воплощать в жизнь	Enter	Return

постскриптум

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

адрес github, добро пожаловать в подписку~

блог

Мой блог, нажми на звездочку, не теряйся~

Нет публики

передний момент