Неужели все, на что способен веб-обозреватель от Google – это только обрабатывать и отображать содержимое страниц сайтов без возможности управления ими? Конечно нет, ведь инструменты разработчика в Google Chrome открывают доступ к продвинутым возможностям по персонализации страниц, изучению кода, запуску программных команд и т.п. В браузере есть специальное меню с обилием полезных средств настройки и управления как для веб-программистов, так и обычных пользователей. Подробности о способе запуска этих параметров в Chrome, содержимом разделов и способах их использования находятся ниже.
- Как открыть меню браузера Гугл Хром со средствами разработки
- Решение 1: посмотреть через меню браузера
- Решение 2: запустить консоль из контекстного меню
- Решение 3: отобразить продвинутые настройки страницы горячими клавишами
- Панель разработчика Google Chrome: советы по использованию
- Вкладка Elements
- Раздел Console
- Группа Sources
- Папка Network
- Страница Performance
- Блок Memory
- Вкладка Application
- Раздел Security
- Подгруппа Audits
Как открыть меню браузера Гугл Хром со средствами разработки
Сперва стоит найти, где находится эта консоль в Гугл Хроме. Для запуска необходимого инструмента разработчики предусмотрели сразу 3 способа.
Решение 1: посмотреть через меню браузера
Метод позволяет найти и отобразить инструменты разработчика в Гугл Хроме только лишь с помощью мыши.
Как включить меню Гугл Хром:
- Нажимаем на три точки справа от поисковой строки.
- Ведем мышь к строке «Дополнительные инструменты» и останавливаем курсор на ней.
- Выбираем «Инструменты разработчика».
Решение 2: запустить консоль из контекстного меню
Еще один полезный вариант, позволяющий запустить панель управления Гугл Хром только мышью. Плюсов у метода сразу 3: потребуется всего 2 клика, не нужно отрываться от чтения и возможность быстро найти код целевого элемента.
Как открыть консоль разработчика в Гугл Хром:
- На любом веб-портале нажимаем правой кнопкой мыши (ПКМ) по любому месту страницы.
- Выбираем опцию «Просмотреть код».
Полезно! Чтобы увидеть код конкретного элемента, жмем ПКМ по нему. После перехода в панель инструментов Гугл Хрома отобразится код ссылки, блока или строки, по которому сделали клик.
Решение 3: отобразить продвинутые настройки страницы горячими клавишами
Способ противоположный предыдущим методам тем, что он не требует наличие мышки, все действия легко выполнить только на клавиатуре. Достаточно нажать Ctrl + Shift + I. Важное достоинство метода – его можем применять практически на всех сайтах, даже на тех, что блокируют доступ к консоли альтернативными способами.
Панель разработчика Google Chrome: советы по использованию
Теперь мы знаем, где находится рассматриваемое меню в Гугл Хром и пришло время углубиться в содержимое раздела. В нем действительно много всего интересного.
Вкладка Elements
Это самая популярная вкладка из инструментов разработчика в Гугл Хром, на которой отображается вся структура страницы в HTML и CSS-виде. Здесь можем увидеть все стили, классы для тегов и даже изменить или добавить значения для конкретных элементов. Очень удобно во время построения страниц, так как позволяет быстро определить недостающее свойство. Все изменения сразу отображаются на сайте, но только до перезагрузки страницы.
Раздел Console
Это своеобразная панель задач Google Сhrome, позволяющая видеть ошибки в JavaScript-коде, а также запускать различные команды. Активно используется разработчиками и хакерами, обычным пользователям не слишком полезный раздел. В целом здесь масса гибких возможностей, основанных на использовании JS.
Еще одна полезная опция – эмулирование данных с датчиков устройств для тестирования сайтов. Она отображается в дополнительном окне, независимо от раздела, в котором находимся.
Группа Sources
На этой странице отображается расположение файлов, которые использовались во время построения списка, и их содержимое. Правда, PHP-файлы отображаются уже в обработанном, а не исходном виде. Файлы CSS и HTML показываются в изначальном варианте.
Папка Network
Главная задача данного меню Гугл Хром – дать представление веб-разработчику о длительности загрузки тех или иных данных. Преимущественно отображаются данные о скачивании картинок, но есть информация и о других элементах. Это отличный инструмент для сокращения времени запуска страницы.
Страница Performance
Этот инструмент Гугл Хром позволяет определить производительность сайта и кода страницы. Для достижения поставленной цели браузер обрабатывает все команды, а в конце выдает сведения в виде отчета с подробной информацией.
Блок Memory
Здесь отображается вес всех элементов страницы, в том числе текстовых файлов, командных строк, объектов и даже ошибок. Инструмент полезен для анализа размера и дальнейшего облегчения сайта.
Вкладка Application
Многофункциональная папка, в которой совмещены инструменты для управления сервисами, работы с куки, локальным кэшем, данными сессий, базой данных и многим другим. Для обычного пользователя может быть полезна очистка данных, которая доступна на странице «Clear Storage», а также средства для просмотра cookies и cache
Раздел Security
Показывает сведения о безопасности использования сайта. Здесь отображается, насколько надежными являются источники, откуда загружаются данные, а также стандарты защиты данных. Еще можем посмотреть сертификат SSD для HTTPS-соединения.
Подгруппа Audits
Страница предлагает полноценное сканирование сайта и оценку по ряду критериев: от производительности до SEO-оптимизации и удобства использования. Помимо выдачи баллов по каждой категории, снизу отображается список проблем с рекомендациями для их устранения.
На этом все, мы рассказали, где находятся инструменты Google Сhrome, а также кратко затронули их содержимое. Теперь у пользователей развязаны руки для более гибкого управления сайтами и воздействия на коды страниц изнутри.
