Автор оригинала: Flavio Copes.
Проверьте мой Обзор Chrome devtools Если вы новичок в этой потрясающей функции браузера!
1. Перетаскивание в панели «Элементы»
На панели элементов вы можете перетаскивать любой HTML-элемент и изменить его положение по странице
2. Ссылка на текущий выбранный элемент в консоли
Выберите узел на панели элементов, и введите $ 0 в консоли для ссылки на него.
Если вы используете jQuery, вы можете ввести $ ($ 0) Чтобы получить доступ к API jQuery на этом элементе.
3. Используйте значение последней операции в консоли
Использовать $ _ Для ссылки на возвращаемое значение предыдущей операции выполняется в консоли
4. Добавьте CSS и отредактируйте состояние элемента
На панели элементов есть две супер полезные кнопки.
Первый позволяет добавить новое свойство CSS с любым селектором, который вы хотите, но предварительно заполнить выбранный в данный момент элемент:
Второй позволяет вам вызвать состояние для выбранного элемента, поэтому вы можете видеть, как стили применяются при активном, зависении или на фокусе.
5. Сохранить, чтобы подать модифицированные CSS
Нажмите на имя файла CSS, который вы отредактировали. Инспектор открывает его в панель источников, и оттуда вы можете сохранить его с помощью в прямом эфире, которые вы применяли.
Этот трюк не работает для новых селекторов, добавленных с помощью + или в элемент .style свойства, но только для модифицированных, существующих.
6. Скриншот один элемент
Выберите элемент и нажмите CMD-Shift-P (или Ctrl-Shift-p в Windows) Чтобы открыть командный меню и выберите Скриншот угла захвата
7. Найдите элемент с использованием селекторов CSS
Нажатие CMD-F ( Ctrl-F в Windows) открывает окно поиска на панели элементов.
Вы можете ввести любую строку там, чтобы соответствовать исходным коде, или вы также можете использовать селекторы CSS, чтобы Chrome генерировать изображение для вас:
8. Введите Shift в консоли
Чтобы написать команды, которые проводятся над несколькими строками в консоли, нажмите Shift-Enter Отказ
Как только вы будете готовы, нажмите Enter в конце скрипта, чтобы выполнить его:
Вы можете очистить консоль, используя Ясно Кнопка на левом верхнем углу консоли, или нажав Ctrl-L или CMD-K Отказ
9. Перейти к …
На панели источников:
CMD-O(Ctrl-oв Windows) показывает все файлы, загруженные вашей страницей.CMD-Shift-o(Ctrl-Shift-oв Windows) показывает символы (свойства, функции, классы) в текущем файле.Ctrl-Gидет в конкретную линию.
10. Смотреть выражение
Вместо того, чтобы снова написать и снова имя переменной или выражение, которое вы собираетесь проверить во время отладки сеанса, добавьте его в Смотреть выражение список.
11. XHR/Fetch отладки
От отладчика открыть XHR/Fetch точек останова панель.
Вы можете установить его, чтобы сломать в любое время, когда отправляется вызов XHR/FECT, или только на конкретных:
12. Отладка на модификации DOM
Щелкните правой кнопкой мыши элемент и включите Перерыв на поддельные модификации. Всякий раз, когда скрипт пройден к детям этого элемента и изменяет их, отладчик автоматически останавливается, чтобы позволить вам осмотреть то, что происходит.