Перейти к основному содержимому

Инструменты web-разработчика (DevTools)

Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе.

🔗 Оригинальная страница — Источник данного материала

Описание​

DevTools — это встроенный набор инструментов браузера для просмотра и анализа веб-страниц. С его помощью можно:

  • посмотреть HTML-код и структуру страницы;
  • проверить стили CSS;
  • найти нужный элемент и его атрибуты;
  • посмотреть сетевые запросы;
  • увидеть ошибки JavaScript;
  • временно изменить содержимое или оформление страницы.
Доступно только для движка Chrome

image-20210601-124831

Как открыть окно?​

Нужно кликнуть по соответствующей кнопке справа от адресной строки браузера ProjectMaker:

image-20211226-161922

Принцип работы​

Кнопка Inspect​

Позволяет быстро найти HTML-код нужного элемента.

image-20210601-130008

Нажмите её, а затем наведите курсор на элемент страницы и кликните по нему. Выбранный элемент будет подсвечен во вкладке Elements.

Вкладка Elements​

Тут отображается DOM текущей страницы.

image-20210601-125200

В данной вкладке можно:

  • изучить структуру HTML;
  • посмотреть теги и их атрибуты;
  • изменить текст или HTML-код элемента;
  • добавить или удалить атрибут;
  • временно скрыть или удалить элемент.
внесённые изменения действуют только в текущей вкладке

Они исчезают после обновления страницы.

Поиск по XPath​

Данное окно можно использовать для тестирования XPath запросов.

image-20210601-124547

Откройте вкладку Elements и нажмите Ctrl + F:

  1. В появившееся поле введите обычный текст, XPath-запрос или CSS-селектор.
  2. Подходящие элементы будут подсвечены в коде страницы.

Вкладка Console​

Здесь можно запускать и проверять JavaScript-код.

Он будет выполняться в контексте открытой страницы, поэтому ему доступны загруженные на ней объекты, функции и библиотеки.

Готовый код можно перенести в ProjectMaker и выполнить с помощью экшена Код JavaScript.

Вкладка Network​

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

Если список запросов пуст

Откройте вкладку Network заново и обновите страницу.

image-20210601-130903

Здесь можно посмотреть:

  • адрес запроса;
  • используемый HTTP-метод;
  • заголовки и передаваемые данные;
  • ответ сервера;
  • код состояния, например 200, 403 или 404;
  • время выполнения запроса.

Эта информация пригодится при создании собственных HTTP-запросов.

Полезные ссылки​