proglib
Сообщение

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

Почему специалистом по кибербезопасности быть интереснее, чем разработчиком или сисадмином? Приглашаем на вебинар от HackerU

14 наиболее полезных особенностей Chrome DevTools

0
25386

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

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

Вы можете выбрать любой HTML-тег и перетащить его в любое место в коде.

Chrome DevTools

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

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

Chrome DevTools

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

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

Chrome DevTools

Добавление CSS и изменение состояния тега

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

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

Chrome DevTools

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

Chrome DevTools

Поиск места, где определен CSS

cmd-click (ctrl-click в Windows) по CSS в панели элементов, Chrome DevTools укажет вам на место, где оно определено в Sources panel.

Chrome DevTools

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

Нажмите на имя CSS-файла, который вы редактировали. Chrome Devtools откроет его в Sources panel. Оттуда вы можете сохранить его со всеми изменениями.

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

Chrome DevTools

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

Выберите элемент, нажмите cmd-shift-p (Ctrl-shift-p в Windows), чтобы открыть меню команд. Затем выберите Capture node screenshot.

Chrome DevTools

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

Нажмите cmd-f (ctrl-f в Windows), чтобы открыть окно поиска в панели элементов. Здесь вы можете ввести любую строку и, если она есть в коде, она выделится.

Chrome DevTools

Ввод в консоли с помощью shift-enter

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

Chrome DevTools

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

Для того чтобы очистить консоль, вы можете использовать кнопку Clear в верхнем левом углу консоли или с помощью сочетания клавиш ctrl-l/cmd-k.

Приятные мелочи в Chrome DevTools

В Sources panel:

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

Chrome DevTools

Контрольное выражение

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

Chrome DevTools

Отладчик XHR/Fetch

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

Chrome DevTools

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

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

Chrome DevTools

Оригинал

Материалы по теме:

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 0

ВАКАНСИИ

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG