• База знаний
  • /
  • Блог
  • /
  • Wiki
  • /
+380 (44) 364 05 71

Консоль разработчика google chrome

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

Google Chrome DevTools – как это работает и кому это необходимо?

Мы знаем их, как инструменты для разработчиков сайтов.

  • Предназначены для отладки и разработки и веб инструментами, встроенными в браузер.
  • Дают доступ к структуре сайта и браузеру для его тестирования.
  • Их функционал начинается от эмуляции просмотра на различных устройствах до редактирования сайта.
  • Дает возможность проверять производительность сайта в целом, и отдельных частей.

Так же есть экспериментальная версия браузера Chrome Canary которая обновляется ежедневно.

https://www.google.com/intl/ru/chrome/canary/

общий вид обновлений в браузере

Пользовательская версия браузера и Canary могут работать вместе, так как Canary не всегда стабилен.

В данной статье мы приведем некоторые сочетания клавиш, а с полным их списком вы можете ознакомиться на веб-сайте Google Developer перейдя по ссылке:

https://developers.google.com/web/tools/chrome-devtools/shortcuts

Chrome DevTools - как открыть?

Есть три основных способа открыть DevTools в браузере. Используйте тот метод, который вам нравится, ниже подробнее о них:

1. Из меню браузера.

Первый метод открытия DevTools

Нажать на кнопку с тремя точками, перейти в Дополнительные инструменты -> Инструменты разработчика

2. Открыть с помощью мышки

Второй метод открытия DevTools

Быстрый и простой способ перейти в DevTools вызвав контекстное меню в браузере.
Правой кнопкой мыши щёлкните на элементе сайта и затем выберете «Просмотреть код».

3. Открыть сочетанием клавиш

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

  • Mac: Cmd + Opt + I
  • Windows: F12 или Ctrl + Shift + I

Рассмотрим 9 основных вкладок в консоли разработчика

Elements - элементы страницы

Элементы страницы.

В данной вкладке вы можете увидеть структуру страницы, на которой вы находитесь в данный момент (справа).

  • При нажатии на элемент, в нижней части можно увидеть полный путь к нему.
  • С правой стороны панель стилей. В ней можно редактировать активный стиль элемента, из правой части.
  • В данной вкладке можно редактировать содержимое страницы, перемещать HTML блоки, создавать новые элементы. Используется для отладки и редактирования страницы непосредственно в браузере.

Console - консоль

Консоль

  • Данный инструмент используется для отладки кода Javascript, проверки скриптов, просмотр логов, которые можно выводить с помощью команды console.log, а также вывод различных ошибок кода и загрузки элементов.
  • Некоторые расширения браузера Chrome также могут выводить некоторую информацию и ошибки, например посмотреть как Adblock блокирует рекламу на странице.

Sources - ресурсы, файлы

Ресурсы

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

Network - сеть

Сеть

В данном инструменте можно посмотреть, как загружаются файлы браузером, статус загрузки файлов, тип, размер, время загрузки и время выполнения страницы.

При использовании данной страницы по умолчанию выключается кеширование браузером.

Perfomance - скорость работы

Скорость работы

  • Используется для оценки нагрузки и скорости загрузки по каждому элементу.
  • Демонстрирует, как они в целом влияют на скорость работы сайта.

Memory - количество используемой памяти

Использование памяти

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

Application - приложение

Используется для просмотра и отладки веб приложений.

Security - безопасность

Безопасность

Просмотр насколько безопасен ваш сайт, в основном используется для отладки HTTPS на сайте.

Lighthouse - оценка скорости работы сайта

Оценка скорости

Это по сути «Google Page Speed» внутри браузера, избавляет вас от перехода на страницу данного инструмента для теста там.

  • С правой стороны есть настройки, что именно вам хочется проверить, а так же на каком типе устройства требуется сделать проверку.
  • Результат можно будет сгенерировать кнопкой «Generate report» и через некоторое время будет результат.
  • Для того чтобы очистить и проверить снова - есть кнопка новой проверки.

Советы и приемы

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

Если вы не использовали их раньше, то это отличная возможность пройти быстрый курс по инструментам.

Быстрое переключение файлов

Быстро получить доступ к файлам сайта - можно используя комбинацию Ctrl + P (Mac: Cmd + P), и выполнить поиск по названию.

Быстрый доступ к файлам

Улучшение читаемости кода

Немногие знают, что в DevTools есть возможность автоматически разворачивать код, так он проще читается.

  • Проверить данный функционал можно, нажав на {} во вкладке Sources.
  • Очень полезная функция, когда код минифинцирован.

Читаемость кода

Изменение HTML элементов

Во вкладке «Elements» удобно редактировать элементы в браузере, сразу видны изменения на сайте.

  • Выбрав любой элемент в панели, щёлкните по тегу дважды, он перейдет в режим редактирования. Так можно изменить класс, тег, добавить свойства.
  • При этом автоматически обновятся закрывающиеся теги. Изменения в браузере будут видны, будто вы действительно внесли правки в код.

Редактирование html

Изменение свойств CSS

Свойства стилей можно изменять в той же вкладке. Удобный и легкий способ изменения внешнего вида сайта мгновенно.

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

Редактор свойств CSS

Поиск кода

Быстро найти код поможет команда Ctrl + Shift + F (Mac: Cmd + Opt + F).

Поиск кода

Точки остановки работы кода Javascript (брейкпоинты)

При отладке кода Javascript полезно указывать брейкпоинты.

  • Во вкладке Sources нажмите на строчку кода, где нужна остановка скрипта, и выполните комбинацию Ctrl + R (Mac: Cmd + R) для перезагрузки страницы.
  • Работа скрипов сайта остановится на выбранном вам месте. Кнопка F8 отвечает за паузу и продолжение выполнения скриптов.

Отладка кода

Переход к нужной вам строке

Переход выполняется с помощью команды Ctrl + O (Mac: Cmd + O).

Мы вывели для примера строку 256 и столбец 15.

Переход по строкам

Несколько курсоров

К примеру - у вас несколько строк или частей кода, и вам нужно что-то добавить.

Вы можете ввести команду Ctrl + Click (Mac: Cmd + Click), и у вас будет возможность вводить информацию в несколько строк одновременно.

Несколько курсоров

Положение консоли

  1. Вы можете изменить положение Chrome DevTools в браузере и даже отстыковать его от окна, чтобы использовать например на втором мониторе. Или просто закрепить в определенном положении в окне.
  2. Изменить можно сочетанием клавиш Ctrl + Shift + D (Mac: Cmd + Shift + D) или через меню внутри консоли разработчика.

Замена положения консоли

Очистить кеш и куки

Очень легко можно очищать кеш и куки внутри консоли, не используя настройки браузера, это важно при тестировании сайта.

  • Очистить куки можно во вкладке Application - слева меню Storage - Cookies.
  • Нажимая на эти файлы правой кнопкой, можно очистить их.
  • Чтобы отключить кеширование, нажмите на Настройки (шестерня) и найдите в таблице Network пункт- «Disable cache». Теперь когда вы находитесь в консоли разработчика, кеш сайта не будет сохраняться.

Очистка кеш и куки в браузере

Режим медиа устройства

Проверить свой вебсайт на адаптивность можно в специальном режиме устройства.

  • В данном режиме можно проверить совместимость вашего сайта с популярными форматами гаджетов и место разрыва страницы, чтобы применить там media query.
  • В режиме просмотра на устройстве, можно нажать на значок планшета в DevTools или зажать Ctrl + Shift + M (Mac: Cmd + Shift + M).
  • Вы можете выбрать мобильное устройство из списка доступных, или задать разрешение самостоятельно. Во втором случае нужно кликнуть - Responsive.
  • Также можно изменить положение устройства.

Проверка адаптивности сайта

Цветовая палитра и её подбор

Можно извлечь любой цвет, который используется на сайте.

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

Цветовая палитра

Изменение цветового формата

Для переключения между цветовыми моделями RGBA, HSL, HEX можно используя комбинацию клавиш Shift + Click на цветовом блоке.

Редактор цветового формата

Переключить состояние элемента

  • Еще один полезный инструмент называется – «Toggle Element State», служит для просмотров скрытых стилей. Стили активируются, при наведении мышкой на элемент или нажатие на него.
  • Инструмент позволяет вам изменять состояние элемента, например «hover», чтобы вы могли посмотреть, как он будет выглядеть на сайте, не перемещая каждый раз на него мышку.

Просмтор скрытых стилей

История сетевой загрузки

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

  • Она захватывает во время загрузки снимки экрана. Можно увидеть, как отображается шрифт и есть ли проблемы с загрузкой шрифтов.https://www.keycdn.com/blog/web-font-performance
  • В панели «Network» можно также сделать настройку, нажав на значок и отметив Capture screenshots. Теперь перезагрузите страницу комбинацией Ctrl + R (Mac: Cmd + R).

История загрузки страницы

Производительность

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

Для запуска нажмите Ctrl + E (Mac: Cmd + E) и обновите страницу Ctrl + R (Mac: Cmd + R).

Остановить можно нажав на Finish.

Проверка производительности

Регулирование сети

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

  • Если у посетителя вашего сайта - медленный интернет, ему поможет данный инструмент.
  • В панели «Network» нажмите «Online» (установка по умолчанию) и выбирайте значение или уже из готовых, или создайте свой профиль кнопкой «Add».
  • Можно установить скорость загрузки, отдачи и задержку (например, чтобы проверить скорость в других странах).

Тест скорости загрузки сайта

Безопасность

  • В данной панели можно проверить, действителен ли ваш сертификат, является ли соединение - безопасным.
  • Отлично подходит для миграции на HTTPS и исправлении Mixed content.

Проверка безопасности соединения

Заключение

Надеюсь, вы заметили, как много полезных функций имеет DevTools в браузере Chrome.

  • Данные инструменты помогут вам проверять производительность и работу сертификатов, делать отладку вашего сайта
  • Все, что было сказано выше, лишь часть множества доступных функций.

Если мы не рассказали, о какой – то из функций, напишите нам об этом в комментариях.

Мы подготовим обзор необходимых функций для Вас по интересующим темам.

Дата: 18.06.2020
Автор: Тимур
Голосование

Авторам статьи важно Ваше мнение. Будем рады его обсудить с Вами:

comments powered by Disqus
Спасибо, что выбираете FREEhost.UA