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

0 69

В браузерах 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 - начало работы

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

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

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

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

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

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