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

0 0

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

  • Доступные панели
    • Панели Chrome
    • Панели Firefox
  • Как переместить интерфейс инструментов разработчика
    • В Chrome
    • Интерфейс Firefox
  • Просмотр веб-страницы на экранах различных размеров
    • Размер экрана Chrome
    • Размер экрана Firefox
  • Панель элементов
    • Sources
    • Styles
    • Подсветка и выбор элемента
    • Изменение классов и атрибутов
    • Редактирование содержимого HTML-элементов
    • Удаление и скрытие элементов DOM
    • Просмотр блочной модели элемента
    • Поиск стилей с использованием фильтра
  • Панель Console
    • Написание и редактирование кода JavaScript
    • Выбор элементов HTML
    • Управление DOM
    • Логирование информации
  • Как открыть инструменты разработчика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Панели Chrome

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

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

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

    Панели Firefox

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

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

    Это:

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

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

    В Chrome

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

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

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

    Интерфейс Firefox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Sources

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

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

    В Firefox:

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

    Styles

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

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

    В Firefox:

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

    Как правильно осуществить редирект с HTTP на HTTPS?

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

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

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

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

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

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

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

    В Firefox:

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

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

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

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

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

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

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

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

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

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

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

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

    Что такое кэширование сайта и почему это важно

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Панель Console

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

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

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

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

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

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

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

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

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

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

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

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

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

    Управление DOM

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

    До:

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

    После:

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

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

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

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

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

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

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

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

    Оставьте ответ