Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Палитры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Комментарии