Крутые советы и рекомендации по Chrome DevTools, которые вам пригодятся

Перевод статьи Flavio Copes из FreeCodeCamp. Оригинал расположен здесь.

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

1. Drag-and-drop в панели элементов

В Пенели элементов вы можете перетягивать любой HTML элемент, меняя его позицию на странице

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

Выберите узел в панели элементов и введите $0 в консоли для ссылки на него.

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

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

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

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

На панели элементов расположены 2 полезные кнопки. Первая позволяет вам добавлять новое CSS свойство, с любым селектором по вашему желанию (но с предварительно подставленным селектором текущего элеемента):

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

5. Сохранение модифицированого CSS в файл

Кликните на имя CSS файла, который вы редактировали. Инспектор откроет его в панели Sources и там вы можете сохранить его вместе с внесенными вами, в живом режиме, изменениями.

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

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

Выберите элемент и нажмите ctrl-shift-p (или cmd-shift-p на Mac) для того, чтобы открыть Меню Команд (Command Menu) и выберите Capture node screenshot

7. Поиск элмента по CSS селектору

Нажатие ctrl-f (cmd-f на Mac) открывает строку поиска в Панели элементов.

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

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

Для ввода команды, которая состоит из нескольких строк в Консоли — используйте shift-enter.

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

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

9. Переход…

В панели Sources:

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

10. Наблюдаемые выражения (Watch Expression)

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

11. Дебаг XHR/Fetch

В дебагере откройте панель XHR/Fetch Breakpoints.

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

12. Дебаг модификаций DOM

Кликните правой кнопкой по элементу и активируйте Break on Subtree Modifications (брекпойнт на модификацию поддерева). Как только скрипт воздействует на дочерние элементы узла и модифицирует их — дебагер автоматически остановится, чтобы дать вам возможность выяснить, что произошло.