Инструменты разработчика Сhrome и Firefox - начало работы

В браузерах Google Chrome и Firefox имеются собственные наборы инструментов для разработчиков. В этой статье мы рассмотрим оба этих набора.

Как открыть инструменты разработчика

Инструменты Chrome

После запуска Chrome вы увидите следующее окно:

Инструменты Chrome

Нажмите Ctrl + Shift + I, чтобы открыть инструменты разработчика. Также можно кликнуть правой кнопкой мыши в любом месте веб-страницы и выбрать в контекстном меню пункт «Просмотреть код».

Инструменты Chrome - 2

После этого откроются инструменты разработчика.

Инструменты разработчика в Firefox

После запуска Firefox вы увидите следующее окно:

Инструменты разработчика в Firefox

Нажмите Ctrl + Shift + I, чтобы открыть инструменты разработчика. Или кликните правой кнопкой мыши в любом месте веб-страницы и выберите в контекстном меню пункт «Исследовать элемент».

Инструменты разработчика в Firefox - 2

После этого будут открыты инструменты разработчика.

Доступные панели

Панели Chrome

Панели Chrome

В инструментах разработчика Google Chrome доступны следующие панели:

  • Elements– просмотр и изменение DOM и CSS.
  • Console– просмотр сообщений и запуск JavaScript из консоли.
  • Sources– отладка JavaScript, сохранение изменений, внесенных с помощью инструментов разработчика, и запуск фрагментов JavaScript.
  • Network – просмотр и отладка сетевой активности.
  • Performance– улучшение производительность загрузки и времени выполнения.
  • Memory– использование памяти и отслеживание утечек.

Панели Firefox

Панели Firefox

Доступные панели в Firefox расположены в верхней части инструментов разработчика.

Это:

  • Инспектор– позволяет проверить и изменить HTML и CSS веб-страницы.
  • Консоль– просмотр сообщений и запуск JavaScript из консоли.
  • Отладчик– позволяет пройтись по JavaScript-коду чтобы изучить или изменить его.
  • Сеть– отображает все сетевые запросы, которые выполняет Firefox. А также, сколько времени занимает каждый запрос.
  • Профайлер – дает представление об общей производительности JavaScript и сайта.
  • Поддержка доступности– предоставляет средства для доступа к важной информации через дерево специальных возможностей. Это позволяет проверить, какие из элементов отсутствуют.

Как переместить интерфейс инструментов разработчика

В Chrome

Чтобы поменять область расположения инструментов разработчика в Chrome, нажмите на три точки вверху:

В Chrome

Доступно четыре различных варианта: закрепить панель слева, справа, снизу или открыть панель в отдельном окне.

Интерфейс Firefox

Чтобы переместить инструменты разработчика в Firefox, нажмите на три точки вверху:

Интерфейс Firefox

Доступно четыре варианта размещения: закрепить панель слева, справа, снизу или открыть панель в отдельном окне.

Просмотр веб-страницы на экранах различных размеров

В Chrome, и Firefox есть средства для просмотра веб-страницы на экранах различных размеров.

Размер экрана Chrome

Чтобы активировать адаптивный вид в Chrome, нажмите на Toggle device toolbar в левой части верхней панели.

Размер экрана Chrome

Для получения дополнительной информации о режиме адаптивного дизайна в Chrome перейдите по ссылке.

Размер экрана Firefox

Чтобы активировать адаптивный вид в Firefox, нажмите на «Режим адаптивного дизайна» с правой стороны верхней панели.

Размер экрана Firefox

Для получения дополнительной информации о режиме адаптивного дизайна в Firefox перейдите по этой ссылке.

Панель элементов

Панель элементов является наиболее часто используемым инструментом. Он позволяет манипулировать DOM, изменяя веб-страницу.

Чтобы посмотреть, как выглядит веб-страница с различными стилями или и элементами, внесите эти изменения непосредственно в данной панели элементов. Это позволяет редактировать сайт непосредственно в браузере без изменения исходного кода.

Sources

Здесь отображается HTML-код веб-страницы. В Chrome это выглядит следующим образом:

Sources

В Firefox:

Sources - 2

Styles

Здесь отображается весь CSS, заданный для HTML-элементов. В Chrome это выглядит следующим образом:

Styles

В Firefox:

Styles - 2

Можно редактировать стили выбранного элемента, написав новый код в любом из селекторов CSS.

Я добавил новый размер шрифта для выбранного абзаца.

Подсветка и выбор элемента

Чтобы выбрать определенный элемент, нажмите на значок селектора элемента или воспользоваться клавиатурной комбинацией Ctrl + Shift + C.

В Chrome это выглядит следующим образом:

Подсветка и выбор элемента

В Firefox:

Подсветка и выбор элемента - 2

Когда селектор активен, элементы, на которые вы наводите курсор, будут подсвечиваться. Если кликнуть по элементу, он будет выбран в панели инспекторе.

Изменение классов и атрибутов

В Chrome после клика правой кнопкой мыши по элементу отобразится опция Edit as HTML или Add attribute.

Изменение классов и атрибутов

Если выберите Add attribute, то сможете ввести необходимый атрибут.

Изменение классов и атрибутов - 2

Если выбрать Edit attribute, элемент будет преобразован в текстовую область для его редактирования.

Для примера я добавил новые классы в атрибут class и добавил еще один атрибут.

В Firefox это работает аналогично.

Редактирование содержимого HTML-элементов

Для этого достаточно дважды кликнуть по тексту в элементе. После чего откроется поле ввода с содержимым элемента.

Редактирование содержимого HTML-элементов

Затем нужно задать новые значения и нажать Enter.

Удаление и скрытие элементов DOM

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

Удаление и скрытие элементов DOM

После чего элемент будет удален из DOM, и веб-страница будет отображаться без него.

В Firefox схожая опция называется «Удалить узел». И в ней нет возможности скрыть элемент.

Удаление и скрытие элементов DOM - 2

Просмотр блочной модели элемента

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

Просмотр блочной модели элемента

Когда вы наводите курсор на часть блочной модели, этот элемент будет выделен на веб-странице. В Firefox данная функция находится в той же части, что и в Chrome:

Просмотр блочной модели элемента - 2

Поиск стилей с использованием фильтра

Чтобы найти определенный стиль в коде, введите его название в поле Filter. В Firefox оно находится в той же области, что и в Chrome.

Поиск стилей с использованием фильтра

Фильтр выполняет поиск только в иерархии выбранного элемента.

Панель Console

Она выполняет две основные цели: отображение зарегистрированных событий и запуск JavaScript.

Также можно запустить JavaScript прямо в браузере. Что позволяет изменять DOM веб-страницы прямо в браузере.

Написание и редактирование кода JavaScript

Для этого войдите в панель Console и начните вводить JavaScript-код. В Firefox это выглядит следующим образом:

Написание и редактирование кода JavaScript

В Chrome это выглядит так:

Написание и редактирование кода JavaScript - 2

Выбор элементов HTML

Консоль имеет доступ к объекту document, поэтому можно запускать такие команды, как querySelector.

Чтобы выбрать элемент с идентификатором test, введите следующий код:

Выбор элементов HTML

В этом коде я создал переменную с именем test и установил ее в качестве возвращаемого значение из document.getElementById(«test»).

Поскольку в предыдущей строке кода нет результата, выводится undefined. Затем я ввел test, в результате чего было выведено значение test.

Управление DOM

Из консоли также можно управлять DOM. Чтобы изменить внутренний текст переменной, я сделал бы следующее.

До:

Управление DOM

После:

Управление DOM - 2

Логирование информации

Если у меня есть HTML-файл, который имеет раздел скрипта, выглядящий следующим образом:

<script>
  const hello_world = "hello from index.html";
  console.log(hello_world);
</script>

Если я открою этот файл в браузере, Console будет выглядеть следующим образом:

Логирование информации

Полный список доступных методов консоли можно найти по этой ссылке.

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

Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, лайки, дизлайки!

Вадим Дворниковавтор-переводчик статьи «Getting Started With Chrome and Firefox Developer Tools»