Интересные советы и подсказки Chrome DevTools, которые вы хотели бы знать

1656655459 interesnye sovety i podskazki chrome devtools kotorye vy hoteli by

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Просмотрите мой обзор Chrome DevTools, если вы впервые пользуетесь этой замечательной функцией браузера!

1. Перетащите и опустите в палитре «Элементы».

На панели «Элементы» можно перетащить любой элемент HTML и изменить его положение на странице

J3dSB29NHaiRsAyWJoY3CtiY5YfvRiHztkkz
Перетащите и опустите в палитре «Элементы».

2. Ссылка на текущий выбранный элемент в консоли

Выберите узел на панели «Элементы» и введите $0 в консоли, чтобы ссылаться на него.

Если вы используете jQuery, вы можете ввести $($0) для доступа к API jQuery для этого элемента.

uBex4ymprtLR2QDMMBJEACRiGwM5tCJqX0zo
Ссылка на текущий выбранный элемент в консоли

3. Используйте значение последней операции в Консоли

использование $_ для ссылки на значение, возвращаемое предыдущей операцией, выполненной в Консоли

-aFTiSJharifJBxSjaWA58lKtao6TYP6ws24
Используйте значение последней операции в Консоли

4. Добавьте CSS и отредактируйте состояние элемента

На панели «Элементы» есть две очень полезные кнопки.

Первый позволяет добавить новое свойство CSS с любым селектором, который вы хотите, но заполнив текущий выбранный элемент:

aLksEN0rT35gMIVX1a-OKKH4GO6pPLUl2TYl
Добавьте правила CSS

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

tcLTyDx-Cpj63K80yhGngLvCJUC8vq00JKL9
Отредактируйте состояние элемента

5. Сохраните в файле измененный CSS

Щелкните имя файла CSS, который вы редактировали. Инспектор открывает его на панели «Источники», и оттуда вы можете сохранить его вместе с изменениями, которые вы применили.

Этот прием не работает для новых селекторов, добавленных с помощью + или в element.style свойства, но только для изменившихся, существующих.

cjIJRyFBsrqtacu7x-2hI2A138q1IkzGkOCx
Сохраните в файле измененный CSS

6. Скриншот отдельного элемента

Выберите элемент и нажмите cmd-shift-p (или ctrl-shift-p в Windows), чтобы открыть меню команд, и выберите Сделайте снимок экрана узла

VY-9pqkmmxqQ65gagIT9ny1chbAFilNSARYx
Скриншот одного элемента

7. Найдите элемент с помощью селекторов CSS

Прессование cmd-f (ctrl-f в Windows) открывает окно поиска на панели «Элементы».

Вы можете ввести там любую строку, чтобы соответствовать исходному коду, или вы также можете использовать селекторы CSS, чтобы Chrome создал для вас изображение:

Et49Lo99VjJ8U7ecVlVHiDUKjbtgYlv3iQ-l
Найдите элемент с помощью селекторов CSS

8. Shift-enter в консоли

Чтобы написать команды, охватывающие несколько строк в консоли, нажмите shift-enter.

Когда вы будете готовы, нажмите клавишу ввода в конце сценария, чтобы выполнить его:

Zp-kmkNp-xwadTjGHYBtG8iVDd2doLcvSF5c
Shift-enter в консоли для написания многострочных команд

Вы можете очистить консоль с помощью ясно в верхнем левом углу консоли или нажав ctrl-l или cmd-k.

9. Перейдите к…

На панели «Источники»:

  • cmd-o (ctrl-o в Windows), показывает все файлы, загруженные вашей страницей.
  • cmd-shift-o (ctrl-shift-o Windows) показывает символы (свойства, функции, классы) в текущем файле.
  • ctrl-g переходит в определенную строку.
puVmoQLIN2MNVSZCth0a2uIXoQtUYektEvXo
Перейти к файлу

10. Смотреть Выражение

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

bu7wYPMPNH4P3QTIepcO17XaU-Ydsl0vxjlR
Смотреть Выражение

11. Настройка XHR/Fetch

С отладчика откройте Точки остановки XHR/Fetch панель.

Вы можете настроить его так, чтобы он прерывался каждый раз, когда посылается вызов XHR/Fetch, или только для некоторых:

uoE2VO1YJrvhZ2gc8NgpRdInyu9TKtPjiihw
Настройка XHR/Fetch

12. Настройка модификаций DOM

Щелкните элемент правой кнопкой мыши и включите Перерыв на модификации поддерева. Каждый раз, когда сценарий обходит дочерние элементы и изменяет их, настройщик автоматически останавливается, чтобы вы могли проверить, что происходит.

hvvrtgLnmMgnDQogl0m9A2gF9FCyfUZfnpbk
Настройка модификаций DOM

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован.