Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Панели Chrome

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Панели Firefox

Начало работы с инструментами разработчика Chrome и Firefox

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

Это:

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

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

В Chrome

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Интерфейс Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

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

Sources

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

Начало работы с инструментами разработчика Chrome и Firefox

В Firefox:

Начало работы с инструментами разработчика Chrome и Firefox

Styles

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

Начало работы с инструментами разработчика Chrome и Firefox

В Firefox:

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

В Firefox:

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

Далее необходимо задать новые значения и нажать Enter.

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Панель Console

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

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

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

Управление DOM

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

До:

Начало работы с инструментами разработчика Chrome и Firefox

После:

Начало работы с инструментами разработчика Chrome и Firefox

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

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

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

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

Начало работы с инструментами разработчика Chrome и Firefox

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *