Что такое Chrome Developer Mode и как его использовать?

Ни один сайт не создан идеально. Как и все продукты, сделанные людьми, ошибки кода являются частью процесса. Вот почему важно тщательно протестировать любой новый веб-сайт, который вы создаете, чтобы убедиться, что он не содержит ошибок, насколько это возможно, чтобы предоставить вашим пользователям наилучшие возможности.

Вы не должны тестировать веб-сайт, не попробовав сначала Google Chrome DevTools Kit. Режим разработчика Chrome позволяет вам попробовать и полностью протестировать новый сайт (или существующий), чтобы найти и исправить ошибки. Он также может дать вам представление о том, как работают другие сайты, включая просмотр исходного кода.

Здесь есть все, что вам нужно знать о режиме разработчика браузера Google Chrome, о том, какими инструментами он обладает и как его эффективно использовать.

Что такое Chrome Developer Mode?

Когда мы говорим о режиме разработчика Chrome, мы не говорим о том же режиме разработчика, который вы увидите в Chromebook. Мы имеем в виду обширные инструменты разработки Chrome (называемые Google DevTools), которые встроены в сам браузер.

Это инструменты, предназначенные для тестирования, анализа и преднамеренного взлома (если необходимо) веб-страницы, загруженной в браузер Google Chrome для тестирования. На базовом уровне вы можете использовать DevTools для просмотра исходного кода веб-сайта, что позволит вам заглянуть под капот, чтобы увидеть, как был создан сайт и насколько хорошо он работает.

Однако Google DevTools предлагает больше, чем это. Вы можете использовать режим разработчика Chrome для изменения страницы после ее загрузки, запускать консольные команды Google Chrome для контроля и управления страницей, а также запускать тесты скорости и сети для мониторинга веб-трафика.

Вы также можете эмулировать другие устройства, включая различные операционные системы и разрешения экрана, в режиме Chrome DevTools. Это позволяет увидеть, имеет ли сайт адаптивный веб-дизайн и где содержимое и макеты сайта будут меняться в зависимости от разрешения или типа устройства.

Несмотря на то, что эти инструменты предназначены для профессиональных веб-разработчиков или тестировщиков, обычным пользователям Chrome также удобно ознакомиться с пакетом DevTools. Если вы обнаружите проблему с сайтом, которую не можете решить, переход в режим разработчика Chrome поможет вам определить, связана ли эта проблема с сайтом или браузером.

Как получить доступ к меню Google Chrome DevTools

Есть несколько способов получить доступ к меню Google Chrome DevTools, в зависимости от инструмента, который вы хотите использовать.

Самый простой способ сделать это из меню Google Chrome. Для этого щелкните значок меню из трех точек в правом верхнем углу. В появившемся меню выберите Дополнительные инструменты> Инструменты разработчика.

Это откроет набор DevTools в новом меню с правой стороны открытой вкладки или окна Chrome.

Вы также можете сделать это с помощью сочетаний клавиш. На ПК с Windows или Linux откройте браузер Chrome и нажмите клавишу F12. Вы также можете нажать клавиши Ctrl + Alt + J или Ctrl + Alt + I в открытой вкладке или окне Chrome.

В macOS нажмите клавишу F12 или клавиши Option + Command + J или Option + Command + I, чтобы открыть меню Chrome DevTools. Это откроет консоль Chrome с параметрами для перехода к другим инструментам Chrome в верхней части меню DevTools.

При желании вы можете просмотреть исходный код веб-сайта (открывая вкладку «Элементы» в меню DevTools в процессе) на любой открытой веб-странице, щелкнув правой кнопкой мыши и выбрав параметр «Проверка».

Использование Chrome DevTools

Как мы кратко затронули, вы можете использовать Chrome DevTools, чтобы увидеть исходный код сайта на вкладке Элементы. Это позволит вам анализировать код за загруженной страницей, а также просматривать сообщения об ошибках (указывающие на проблемы с загрузкой сайта) в консоли Chrome на вкладке «Консоль».

Вы также можете просмотреть различные источники контента с веб-сайта на вкладке Источники. Например, если сайт использует сеть доставки контента (CDN), мультимедиа с сайта будут перечислены здесь как другой источник.

Режим разработчика Chrome позволяет загружать этот контент напрямую или выполнять более сложный анализ контента.

Если вы хотите проверить работу сайта, вы можете отслеживать и регистрировать использование сети на вкладке «Сеть». Это покажет скорость, размер и тип сетевых запросов между вашим браузером и сайтом.

Например, при первой загрузке страницы сайт сам загружает содержимое страницы, но он также может запрашивать данные из сторонних баз данных. Например, когда вы входите, это может запросить базу данных, которая будет отображаться здесь как сетевой запрос.

Вы можете проанализировать это далее на вкладке «Быстродействие», где вы сможете более подробно записать использование браузера Chrome, включая запись снимков экрана в разных точках. Это будет записывать, сколько времени требуется, чтобы загрузить ваш сайт для дальнейшего анализа.

Google Chrome имеет репутацию быть тяжелым в памяти вашего ПК, так что вы можете проверить использование памяти JavaScript вашего сайта на вкладке Память. Здесь можно использовать различные профили тестирования Chrome, а дополнительную информацию об этом тестировании можно найти на Страница документации Chrome DevTools,

Для более глубокого анализа содержимого вашего сайта, а также любого хранилища браузера, которое он может использовать (например, для регистрации данных), вы можете выполнить поиск на вкладке «Приложение». Вы можете просмотреть информацию о файлах cookie сайта в разделе «Файлы cookie» или очистить используемое хранилище, нажав кнопку «Очистить хранилище».

Если вас беспокоит безопасность вашего сайта, вы можете проверить, насколько хорошо он работает, на вкладке Безопасность. Это даст вам краткий обзор анализа безопасности Chrome для страницы, включая информацию о том, имеет ли страница правильный и надежный сертификат SSL.

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

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

Продвинутые хитрости Google Chrome

Большинство пользователей Chrome никогда не узнают, что в их браузере есть набор Google Chrome DevTools, но для опытных пользователей он остается исключительно полезным способом тестирования и анализа веб-сайтов. Есть и сторонние Расширения Chrome для веб-разработчиков доступны, чтобы помочь проверить ваш сайт дальше.

Если ты создание базового сайтаПереключение в режим разработчика Chrome может помочь вам обнаружить ошибки на вашем сайте, которые не сразу видны. Это можно сделать только в том случае, если Chrome работает правильно, поэтому, если вы боретесь с сбоями в Chrome, вам может потребоваться сначала сбросить или переустановить браузер.