Как использовать Chrome DevTools как про

Как следует из названия, Chrome DevTools, или веб-инспектор, является инструментом, предназначенным для веб-разработчиков и людей, связанных с этим. Веб-инспектор позволяет делать следующее:

  • Инспектировать корректность отображения.
  • Отслеживать исполнение скриптов на JavaScript.
  • Просматривать сетевые действия.

При составлении этой статьи я использовал Canary — версию Chrome, где тестируются новые возможности, которые затем попадают в стабильную версию Chrome.

Для того, чтобы запустить инспектор, можно кликнуть правой клавишей мыши в любом месте страницы и выбрать пункт «Просмотреть код элемента», также можно просто нажать Ctrl + Shift + C.

Быстрое редактирование HTML-элементов

Начнём с самого простого: редактирование элементов.

Как проверить:

  • Выберите вкладку «Elements».
  • Выберите любой HTML-элемент внутри панели.
  • Дважды кликните по тегу и измените, например, имя тега.

По завершении редактирования закрывающий тег автоматически обновится.

Раскрыть все дочерние элементы

Как проверить:

  • Перейдите на панель «Elements».
  • Выберите элемент и, удерживая Alt, кликните по стрелочке слева от элемента.

Изменение расположения инспектора

Панель инспектора может быть прижата как к низу окна браузера, так и к его правой стороне. К примеру, расположение панели справа удобно при работе на широкоформатных мониторах. Также панель инспектора можно расположить в отдельном окне и, например, перенести на другой монитор.

Как проверить:

  • Ctrl + Shift + D — Переключение расположения

Поиск DOM-элементов

Наверное, мало для кого это окажется открытием, но во вкладке «Elements» можно производить поиск по DOM.

Как проверить:

  • Нажмите Ctrl + F и введите предполагаемый запрос для поиска.

Палитры

Выбор цвета из палитры
Выбор цвета из палитры

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

Несколько курсоров

Переместите курсор и, удерживая Ctrl, кликните в нужном участке для добавления курсора. Отменить действие можно с помощью Ctrl + U. Лично мне ни разу не пригодилось.

Кодировать изображение в base64

Как проверить:

  • Переключиться на панель «Network».
  • Выбрать изображение
  • Кликнуть правой клавишей по изображению и выбрать «»

Переключение псевдоклассов

Псевдоклассы отражают состояние элементов и их взаиморасположение.

Как проверить:

  • Кликните ПКМ по элементу в панели «Elements» и выберите псевдокласс в списке «Force Element State».
  • Также псевдокласс можно выбрать в правой части панели «Elements».

Выделение столбцом

Как проверить:

  • Перейдите в панель «Sources».
  • Выберите какой-нибудь файл.
  • Выделяйте текст, удерживая Alt.

Выделение столбцом работает также и при редактироавнии HTML в панели «Elements».

Эмуляция сенсорных устройств

Также можно симулировать некоторые датчики:

  • Сенсорный экран
  • Координаты для геолокации
  • Акселерометр

Как попробовать:

  • Выберите панель «Elements».
  • Нажмите «Esc» и выберите «Emulation > Sensors».

Комментарии