Как включить режим разработчика в Google Chrome

Как запустить режим разработчика в Гугл Хроме

Браузер Google Chrome обладает множеством удобных и полезных опций. Одной из таких считают режим разработчика (DevTools). С помощью инструмента можно менять код страницы в обозревателе под конкретные нужды. В этой статье мы рассмотрим, как открыть меню DevTools и какие опции можно настроить.

Для чего нужен режим DevTools

Режим разработчика скрыт от посторонних глаз. Это нужно для того, чтобы неопытные пользователи работали, общались и скачивали информацию без вреда персональному компьютеру.

DevTools подходит для следующих пользователей:

  • веб-разработчиков;
  • программистов;
  • тестировщиков программного обеспечения (ПО) и сайтов.

Режим разработчика содержит инструменты, которые облегчают задачу для прописывания или изменения кода. Он подходит для тех, кто работает или изучает HTML или CSS. Однако пользователи с опытом также смогут использовать инструмент.

Как открыть режим разработчика

Панель DevTools выведена в отдельный пункт. Консоль располагается в главном меню браузера. Открыть ее можно несколькими способами.

Способ №1.

  • Нажмите по вкладке «Меню» (1).
  • Выберите пункт «Дополнительные инструменты (2).
  • Кликните по разделу «Инструменты разработчика» (3).

Способ №2. Зажмите комбинацию клавиш «Ctrl+Shift+I».

Способ №3. На странице кликните правой кнопкой мыши (ПКМ) по любому элементу. Выберите пункт «Посмотреть код.

Главные кнопки элементов

Инструменты разделены на несколько блоков. Каждый раздел отвечает за свою часть навигации.

Элементы DevTools:

  • кнопка закрытия опции «ESC» (1);
  • выпадающее меню с другими настройками (кебаб) (2);
  • Doc Side, или расположение окон с инструментами: слева, внизу, справа, как отдельный блок (3);

  • Hide console drawer – скрывает или открывает дополнительную панель.

Среди отдельных элементов выделяют следующие блоки.

Поиск (Search)

Активируется путем нажатия клавиш «Ctrl+Shift+F». Опция ищет по всем файлам информацию, которая связана с конкретной страницей. Блок имеет несколько дополнительных инструментов, включая шорткаты, очистку поля и обновление поиска.

Адаптив

Кнопки активации инструмента, которые появляются после включения Hide console drawer. Инструмент помогает подгонять окно под разные размеры: мобильные телефоны, планшеты, широкоформатные экраны (1). После выбора настроек можно включить опцию эмуляции. Адаптив поддерживает разные модели устройств, которые можно выбрать в отдельном меню (2).

Вторичные вкладки

Другие кнопки являются частью основных инструментов. Их очень много. Каждая из них помогает работать над частью кода. Чтобы разобраться со всеми настройками придется изучить все элементы по отдельности. Мы выделим только основные.

Elements

Важная вкладка, которая структурирует сайт по категориям (дом дерева). В окне отображается обычный код страницы. Подкатегории отображаются в виде треугольников (1). Если их нажать, откроются строки, привязанные к основному узлу (2).

В доме дерева можно выполнять следующие задачи:

  • разворачивать и сворачивать узлы кода;
  • перемещать строки по каталогу или удалять их;
  • редактировать некоторые элементы кода (атрибуты и теги).

Команды можно задавать, если нажать ПКМ по теговой части. Для поиска нужной фразы нажмите «Ctrl+F» (3). Чтобы изменить масштаб зажмите клавишу Ctrl и увеличивайте (+) или уменьшайте (-) размер окна.

У блока есть свое дополнительное меню.

  • Styles – отображает подробный код, который можно менять.

  • Computed – отображает точную блочную модель для выделенного куска кода.

  • Layout – настройки для внешнего вида строк. Здесь можно выделять, менять цвет отдельных позиций кода. Или скрывать некоторые менее важные элементы. Например, нумерацию линий.

  • Event Listeners – структурирует отдельные подкатегории.

  • DOM Breakpoints – это навигация для брейкпоинтов (точек остановки) (опция подробнее описана ниже в разделе Source). Здесь можно модифицировать или удалять узлы (ноды). То есть, если задать брейкпоинт, он будет отображаться в этом блоке. Схема работы следующая: когда условия задачи для конкретного брейкпоинта исполняются, обозреватель замораживает код в этом месте.
  • Properties – отображает свойства каждого блока в доме дерева.

  • Accessibility – работает с конкретным узлом и его связями.

Network

Следующая важная вкладка. Она следит за загрузкой всех страниц, документов и файлов. При открытии страницы подтягиваются обычно дополнительные строки кода. Это стили, скрипты, изображения и шрифты. Все они отображаются в таблице.

Вы сможете узнать следующую информацию:

  • имя файла (1);
  • статус, который присваивает сервер при получении запроса на конкретный файл (2);
  • тип файла (3)
  • какая команда выполнила запрос (4);
  • размер файла (5);
  • время загрузки (6);
  • последовательность загрузки каждого элемента (таймлайн) (7).

В самом низу страницы отображается общая информация. Сколько было сделано запросов к серверу, общее количество переданных данных и общий тайминг всех загрузок (8).

С помощью инструмента можно выполнять следующие действия:

  • запись всех историй загрузок;
  • очистка истории;
  • запись скриншотов;
  • расширенная информация о файлах;
  • сброс данных при переходе на другую страницу (Preserve log);
  • включение или отключение кэша.

Дополнительно у консоли есть опция имитирования отключения интернета. Это полезная функция, которая узнает, как будет реагировать сайт. Если соединение с сетью прервется.

Console

Здесь могут отображаться важные уведомления о работе древа, ошибки, баги и прописанные логи. Вы сможете использовать JavaScript и выполнять скрытые задачи.

Возможности консоли:

  • вывод любой информации и выделение разных блоков отдельным цветом: ошибки, оповещения, другая информация;
  • проверка работоспособности кода;
  • сортировка кода по группам.

Функция фильтрует вывод консоли. Можно использовать свой вариант или выбрать один из готовых шаблонов.

Source

Здесь можно понять, какие файлы привязаны к странице. В боковом окне можно узнать их содержание. Допустим, если это картинка, тогда вы ее сможете увидеть. Если это HTML-страница, тогда можно развернуто изучить ее код (1).

Основная фишка консоли – это создание брейкпоинтов (2). Технология создает точку остановки и при выполнении всего кода акцент делается именно в конкретном участке. Это очень удобно, особенно когда нужно сделать отладку.

Снова запустить работу страницы можно нажав на стрелку. Если у вас два и больше брейкпоинтов, тогда страница будет загружаться до следующей точки. Потом снова наступит пауза. Управлять брейкпоинтами можно с помощью панели навигации (3).

Performance

Здесь есть данные строки Timeline. Только вся информация предоставляется в более подробном виде.

Консоль отслеживает таймлайн:

  • сети;
  • выполнение кода JavaScript;
  • загрузку сети.

Чтобы запустить работу приложения нажмите кнопку «Запись» (1). Вы получите подробную информацию о выполнении работы кода (2).

Memory

Консоль предоставляет несколько профайлеров, которые мониторят нагрузку кода на персональный компьютер. Опцию можно использовать, чтобы вычислить проблемные участки. Чтобы использовать инструмент выберите один из профайлеров (1) и нажмите кнопку «Take snapshot» (2).

Application

Блок показывает пользователю, какие ему доступны виды хранилища. Если вам надо часто сохранять информацию, вкладки предоставляют доступ к разным типам данных.

Хранить можно следующие данные:

  • переменные и их значения (Local Storage);
  • информация о сессиях пользователя (Session Storage);
  • куки и кэш (Cache Storage).

Security

Страница предоставляет информацию о протоколе безопасности. При условии, что он есть. Также можно узнать информацию о сертификате конкретного подключения.

Заключение

У режима разработчика есть много других настроек. Мы разобрали основные. Однако на официальном сайте Google есть информация про все виды консоли. Главное – это открыть инструмент согласно нашей инструкции и самостоятельно изучить DevTools.

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

Ваш адрес email не будет опубликован.

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять