Список интересных советов и приемов Chrome DevTools

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

Проверьтеобзор Chrome DevToolsесли ты новичок в них

Перетащите на панели "Элементы"

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

Drag and Drop in the Elements Panel

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

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

Reference elements in the Console

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

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

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

Use the last result

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

В панели Elements есть 2 супер-полезные кнопки.

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

Add a CSS rule

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

Element state

Найдите, где определено свойство CSS

cmd-click(ctrl-clickв Windows) свойство CSS на панели «Элементы», DevTools укажет вам место, где оно определено, на панели «Источник».

Find where a CSS property is defined

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

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

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

Save to File the modified CSS

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

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

Screenshot a single element

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

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

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

Find an element using CSS selectors

Shift-Enter в консоли

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

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

Shift-enter in the Console

Очистить консоль

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

Идти к…

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

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

Files list

Смотреть выражение

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

Watch Expressions

Отладка XHR / Fetch

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

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

XHR and Fetch debugging

Отладка модификаций DOM

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

Debug on DOM modifications