Инструменты разработчика С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 »