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

1. Статьи
2. Вебмастеру
3. Инструменты

2023-06-25 0 ∞

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

Обновлено: 2023-06-25 18:30:00Вадим Дворниковавтор материала

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

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

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

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

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

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

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

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

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

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

Панели Chrome

Проверка кроссбраузерности сайта – лучшие бесплатные инструменты

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

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

Панели Firefox

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

Это:

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

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

В Chrome

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

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

Интерфейс Firefox

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

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

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

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

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

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

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

Нужны формы для сайта? Узнайте о 18 лучших бесплатных конструкторах онлайн-форм

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

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

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

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

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

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

Sources

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

В Firefox:

Styles

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

В Firefox:

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

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

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

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

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

В Firefox:

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

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

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

Как проверить бэклинки на сайт? 5 лучших инструментов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель Console

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

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

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

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

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

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

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

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

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

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

Управление DOM

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

До:

После:

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

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

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

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

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

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

Источник: www.internet-technologies.ru