Chrome DevTools – это мощный набор инструментов для веб-разработчиков, встроенный в браузер Google Chrome. Он позволяет проверять, редактировать и отлаживать код, а также измерять производительность страниц. В этом руководстве мы расскажем, как использовать все возможности DevTools для тестирования и отладки веб-страниц.
Друзья, поддержите нас вступлением в наш телеграм канал QaRocks. Там много туториалов, задач по автоматизации и книг по QA.
Почему вам нужен Chrome DevTools?
Есть несколько причин, по которым вам нужен Chrome DevTools для тестирования:.
- DevTools предоставляет мощные инструменты для проверки и редактирования кода. С помощью DevTools вы сможете быстро найти и исправить любые ошибки.
- DevTools позволяет измерять производительность страниц. С помощью панели Performance можно найти и устранить узкие места в коде и посмотреть, как загружается страница на разных устройствах и в разных браузерах.
- DevTools позволяет моделировать различные типы устройств и браузеров. С помощью режима Device Mode вы можете протестировать свою страницу на различных устройствах и посмотреть, как она выглядит и работает. Режим браузера также позволяет моделировать различные версии браузеров.
Как начать работу с DevTools
Чтобы начать работу с DevTools, откройте браузер Chrome и перейдите на URL-адрес, который вы хотите проверить. Затем щелкните правой кнопкой мыши любой элемент на этой странице и выберите “Inspect Element”. Откроется панель DevTools.
Панель DevTools имеет несколько различных разделов:
- Вкладка Elements позволяет просматривать и редактировать HTML и CSS вашей страницы. С помощью вкладки Elements вы можете вносить изменения в код и видеть, как эти изменения сразу же отражаются на странице.
- Вкладка Console позволяет запускать код JavaScript на странице. С помощью консоли можно тестировать фрагменты кода или отлаживать его.
- Вкладка Sources позволяет просматривать и редактировать код JavaScript и CSS вашей страницы. С помощью вкладки Sources можно устанавливать точки останова, переходить по коду и просматривать значения переменных.
- Вкладка Network позволяет увидеть, как загружается страница. С помощью вкладки Network вы можете увидеть, какие ресурсы загружаются и сколько времени занимает загрузка каждого из них.
- Вкладка Performance позволяет отследить, насколько быстро загружается и отображается страница. С помощью вкладки Performance вы можете найти узкие места в коде и оптимизировать страницу для повышения производительности.
- Вкладка Memory позволяет увидеть, сколько памяти использует ваша страница. С помощью вкладки Memory вы можете отслеживать утечки памяти и оптимизировать код для её более эффективного использования.
- Вкладка Application позволяет просматривать состояние приложения на странице. С помощью вкладки Application можно просматривать и редактировать localStorage, cookies и sessionStorage.
DevTools также имеет несколько других функций, которые мы рассмотрим далее в этом руководстве:
- Режим Device позволяет моделировать различные типы устройств. С помощью режима Device вы можете проверить, как будет выглядеть и работать страница на разных устройствах.
- Режим Browser позволяет имитировать различные версии браузеров. С помощью режима Browser вы можете убедиться, что ваша страница хорошо выглядит и правильно функционирует во всех браузерах.
- Network Throttling позволяет регулировать скорость сети для имитации различных соединений. С помощью Network Throttling можно проверить, как будет работать страница на медленных соединениях.
Теперь, когда мы рассмотрели основы DevTools, давайте подробнее познакомимся с каждой из панелей.
Вкладка Elements
Вкладка Elements позволяет просматривать и редактировать HTML и CSS вашей страницы. С помощью вкладки Elements вы можете вносить изменения в код и видеть, как эти изменения сразу же отражаются на странице.
Выберите элемент на странице, чтобы начать работу с вкладкой Elements. Это приведет к появлению HTML для этого элемента. Отсюда вы можете редактировать его HTML или CSS. Все внесенные изменения будут немедленно отражены на странице.
Вы также можете создавать новые элементы на своей странице. Чтобы создать новый элемент, нажмите кнопку “Добавить элемент” в верхней части панели. Появится диалоговое окно, в котором вы можете ввести HTML для нового элемента. После ввода HTML нажмите “ОК”, чтобы добавить элемент на страницу.
Вкладка Console
Вкладка Console позволяет запускать код JavaScript на странице. С помощью консоли можно тестировать фрагменты кода или отлаживать его.
Чтобы начать работу с вкладкой Console, введите в нее код JavaScript и нажмите кнопку “Enter”. Консоль оценит код и выведет результат. Вы также можете использовать консоль для отладки кода. Для этого установите точку останова в коде с помощью ключевого слова “debugger”. Когда выполнение кода достигнет точки останова, консоль приостановится и позволит вам просмотреть код.
Вкладка Sources
Вкладка Sources позволяет просматривать и редактировать код JavaScript и CSS страницы. С помощью вкладки Sources можно устанавливать точки останова, переходить по коду и просматривать значения переменных.
Выберите файл на панели “Files”, чтобы начать работу с вкладкой Sources. Это приведет к появлению содержимого файла в панели “Editor”. Здесь вы вносите изменения в код и видите, как эти изменения немедленно отражаются на странице.
Вы можете легко установить точки останова в коде с помощью панели Sources. Чтобы установить точку останова, щелкните на номере строки, где вы хотите установить точку останова. Появится диалоговое окно, в котором вы можете ввести условия установки точки останова. После ввода условий нажмите “ОК”, чтобы установить точку останова.
Вкладка Network
Вкладка Network позволяет увидеть, как загружается страница. С помощью вкладки Network вы можете увидеть, какие ресурсы загружаются и сколько времени занимает загрузка каждого из них.
Выберите ресурс на панели “Resources”. Это приведет к появлению подробной информации об этом ресурсе в панели “Details”. Здесь вы можете увидеть, когда ресурс был загружен, сколько времени заняла загрузка и какого типа был ресурс.
Вы также можете использовать вкладку Network для дросселирования скорости сети. Чтобы уменьшить скорость сети, нажмите кнопку “Network Throttling” в верхней части панели. Появится диалоговое окно, в котором вы можете выбрать нужную скорость соединения.
Вкладка Performance
Вкладка Performance позволяет увидеть, как работает страница. С помощью вкладки Performance вы можете увидеть, какие ресурсы требуют много времени на загрузку и где возникают узкие места.
Выберите ресурс на панели “Resources”, чтобы начать работу с вкладкой Performance. На панели “Details” появится подробная информация о ресурсе. Вы можете проверить, сколько времени занимает загрузка, какой тип ресурса и его размер.
Вы также можете использовать вкладку Performance для записи профиля производительности. Чтобы записать профиль производительности, нажмите кнопку “Record” в верхней части панели. Начнется запись информации о производительности вашей страницы. По окончании записи просто нажмите кнопку “Стоп”, чтобы сохранить получившийся профиль.
Вкладка Memory
Вкладка Memory позволяет увидеть, сколько памяти использует страница. С помощью вкладки Memory вы можете увидеть, распределение памяти по различным ресурсам.
Выберите ресурс на панели “Resources”. Это приведет к появлению подробной информации об этом ресурсе в панели “Details”. Здесь вы можете проверить, сколько памяти использует ресурс, какого он типа и когда к нему в последний раз обращались.
Вы также можете использовать вкладку Memory, чтобы сделать снимок использования памяти на странице. Чтобы сделать снимок, нажмите кнопку “Take Snapshot” в верхней части панели. Это сохранит копию текущего использования памяти вашей страницы. Сделав снимок, вы можете просмотреть его, чтобы узнать, какие ресурсы занимают память.
Вкладка Application
Вкладка Application позволяет просматривать ресурсы, из которых состоит ваше веб-приложение. С помощью вкладки Application можно увидеть, какие файлы загружаются, какие файлы cookie и локальные хранилища используются.
Выберите ресурс на панели “Resources”. В панели “Details” можно увидеть и проверить, какие файлы загружаются, какие файлы cookie и локальные хранилища используются.
Вы также можете использовать вкладку Application для очистки данных веб-приложения. Чтобы очистить данные веб-приложения, нажмите кнопку “Clear” в верхней части панели. Это приведет к очистке всех данных веб-приложения, включая файлы cookie, локальное хранилище и кэш браузера.
Вкладка Security
Вкладка Security позволяет проверить настройки безопасности веб-страницы. С её помощью вы можете узнать, какие разрешения имеет ваша страница и какие уязвимости в ней могут присутствовать.
Выберите ресурс на панели “Resources”. Это приведет к появлению подробной информации об этом ресурсе в панели “Details”. Здесь вы можете увидеть, какие разрешения имеет страница и какие уязвимости в системе безопасности могут присутствовать.
Вы также можете использовать вкладку Security для изменения настроек безопасности веб-страницы. Чтобы изменить настройки безопасности веб-страницы, нажмите кнопку “Security” в верхней части панели. Откроется диалоговое окно, в котором можно изменить настройки.
Вкладка Settings
Вкладка Settings позволяет настраивать поведение DevTools. С помощью панели настроек можно включить или отключить функции, изменить тему оформления и сочетания клавиш.
Чтобы начать работу с панелью настроек, нажмите кнопку “Settings” в верхней части окна DevTools. Откроется панель настроек.
Особенности Chrome DevTools
Теперь, когда вы знаете, как использовать DevTools, давайте рассмотрим некоторые функции, которые делают его таким важным инстументом для тестировщика.
С помощью DevTools вы можете:
- Просматривать, а также изменять HTML и CSS ваших страниц
- Отлаживать код JavaScript
- Измерять производительность ваших страниц
- Моделировать различные типы устройств и браузеров
Давайте изучим эти особенности подробнее.
Просмотр элементов
С помощью DevTools вы можете просматривать и редактировать HTML и CSS ваших страниц. Это полезно для поиска и исправления ошибок в коде.
Чтобы просмотреть HTML страницы:.
- Во-первых, щелкните правой кнопкой мыши на странице и выберите в меню пункт Inspect.
- Откроется окно DevTools.
- Перейдите на вкладку Elements, чтобы проверить HTML-код.
Вы можете редактировать HTML страницы непосредственно в окне DevTools. Для этого:
- Щелкните правой кнопкой мыши на элементе, который нужно отредактировать, и выберите в меню пункт “Редактировать как HTML”
- Внесите изменения в открывшемся текстовом редакторе
- Когда закончите, нажмите кнопку Сохранить.
Чтобы проверить и отредактировать CSS страницы:.
- Щелкните правой кнопкой мыши на элементе, который нужно проверить, и выберите в меню пункт Inspect
- Откроется окно DevTools
- Перейдите на вкладку Styles, чтобы просмотреть код CSS для выбранного элемента
- Чтобы отредактировать код CSS, просто внесите изменения в открывшемся текстовом редакторе
- Когда закончите, нажмите кнопку Сохранить.
Отладка кода JavaScript
С помощью DevTools вы можете установить точки останова в коде JavaScript, чтобы можно было пройтись по нему строка за строкой и посмотреть, что происходит на каждом этапе. Это полезно для поиска ошибок в коде.
Чтобы установить точку останова в коде:
- Щелкните правой кнопкой мыши на строке кода, в которой вы хотите установить точку останова, и выберите в меню пункт Inspect
- Откроется окно DevTools
- Перейдите на вкладку Sources
- Найдите строку кода, на которой нужно установить точку останова, и щелкните слева, чтобы вставить маркер точки останова.
- Нажмите кнопку воспроизведения в окне DevTools, чтобы начать отладку кода
- Теперь ваш код будет выполняться строка за строкой, пока не достигнет установленной точки останова. Вы можете использовать кнопки в окне DevTools, чтобы перебирать код, или щелкнуть на строке кода, которую вы хотите выполнить, и нажать клавишу F10.
Измерение производительности страниц
В DevTools вы можете измерить производительность страниц с помощью инструментов Timeline и Profiles. Эти инструменты помогут вам найти узкие места в коде, чтобы оптимизировать страницы для повышения производительности.
Для измерения производительности ваших страниц:
- Откройте окно DevTools и перейдите на вкладку Timeline
- Выберите, с какого периода времени вы хотите собирать данные, а затем нажмите кнопку Start
- Щелкните по странице, чтобы взаимодействовать с ней, а затем нажмите кнопку “Стоп”, когда закончите
- Временная шкала покажет вам подробную разбивку всех действий, которые происходили во время записи
- Вы можете использовать инструмент Profiles для более детального анализа определенной части временной шкалы. Для этого щелкните область временной шкалы, которую вы хотите исследовать, затем перейдите на вкладку “Профиль” и выберите тип профиля, который вы хотите получить
- После завершения составления профиля вы сможете увидеть подробный отчет о том, что происходило в вашем коде в течение этого периода времени. Этот отчет поможет вам выявить узкие места, чтобы вы могли оптимизировать свой код для повышения производительности.
Имитация различных устройств и браузеров
С помощью DevTools вы можете моделировать различные типы устройств и браузеров, чтобы проверить, как ваши страницы будут выглядеть и вести себя на разных платформах.
Для имитации устройства:
- Откройте окно DevTools и нажмите на кнопку Settings (три точки)
- Выберите в меню More tools > Rendering settings
- На вкладке Emulate выберите тип устройства, которое вы хотите эмулировать, из выпадающего меню
- При необходимости вы также можете настроить разрешение экрана и плотность пикселей
- Чтобы увидеть, как ваша страница будет выглядеть на этом устройстве, просто обновите страницу.
Для имитации другого браузера:
- Откройте окно DevTools и нажмите на кнопку Settings (три точки)
- Выберите в меню пункт More tools > User-Agent
- На вкладке User Agent выберите браузер, который вы хотите смоделировать, из выпадающего меню
- Чтобы проверить, как будет выглядеть страница в этом браузере, просто обновите ее.
Дополнительные возможности Chrome DevTools
Режим устройства
Режим устройства (Device Mode) – это функция в DevTools, которая позволяет моделировать, как будут выглядеть и вести себя ваши страницы на различных типах устройств. С помощью Device Mode вы можете настроить размер и положение области просмотра, эмулировать различные типы устройств и даже моделировать различные типы сетей, чтобы проверить, как ваши страницы будут работать в различных условиях.
Для доступа к режиму устройства:
- Откройте окно DevTools и нажмите на кнопку Settings (три точки)
- Выберите в меню пункт More tools > Developer Tools
- На вкладке General установите флажок EnableDevice Mode (Включить режим устройства)
- Нажмите на значок Devices (два смартфона)
- Теперь режим устройства будет включен.
Режим браузера
Режим браузера (Browser Mode)- это функция в DevTools, которая позволяет смоделировать, как ваши страницы будут выглядеть и вести себя в различных браузерах. В Browser Mode вы можете выбрать один из списка распространенных браузеров и просмотреть свои страницы так, как будто они отображаются в этом браузере. Это может быть полезно для тестирования того, как ваши страницы будут выглядеть и вести себя на разных платформах.
Чтобы перейти в режим браузера:
- Откройте окно DevTools и нажмите на кнопку Settings (три точки)
- Выберите в меню More tools > Developer Tools
- На вкладке General установите флажок напротив пункта EnableBrowser Mode (Включить режим браузера)
- Щелкните на значке Browsers (глобус)
- Теперь режим браузера будет включен.
Network Throttling
Network Throttling – это функция в DevTools, которая позволяет моделировать загрузку и работу страниц в различных сетевых условиях. С помощью Network Throttling вы можете выбрать из списка распространенные типы сетей и просмотреть свои страницы так, как будто они загружаются через этот тип соединения. Это может быть полезно для тестирования того, как ваши страницы будут работать на разных типах устройств и в разных условиях.
Чтобы получить доступ к дросселированию сети:
- Откройте окно DevTools и нажмите кнопку Settings (три точки)
- Выберите в меню More tools > Developer Tools
- На вкладке General установите флажок напротив пункта Enable Network Throttling
- Нажмите на значок Network (экран компьютера)
- Теперь функция Network Throttling будет включена.
Лучшие практики Chrome DevTools
Существует несколько лучших практик, о которых следует помнить при использовании DevTools.
Использование консоли для разработки и отладки
Console – одна из самых мощных функций в DevTools, которая может быть очень полезна для разработки и отладки. Если вы не знакомы с Console, то это способ просмотра и взаимодействия с кодом JavaScript на ваших страницах. С помощью консоли можно записывать сообщения, выполнять команды и даже отлаживать код.
Просмотрите элементы, чтобы найти проблемы
Если у вас возникли проблемы с оформлением страницы или вы пытаетесь понять, почему что-то работает неправильно, инструмент Inspect может оказаться очень полезным. С помощью Inspect вы можете просмотреть HTML- и CSS-код любого элемента на вашей странице и при необходимости внести в него изменения.
Используйте вкладку Network для оптимизации производительности
Network – это отличный инструмент для оптимизации производительности ваших страниц. С помощью этой вкладки вы можете просмотреть информацию о каждом запросе, сделанном при загрузке страницы, включая тип запроса, URL, время отклика и многое другое. Эта информация может быть очень полезна при устранении проблем с производительностью.
Используйте преимущества сочетаний клавиш в DevTools
В Chrome DevTools есть множество различных функций, которые поначалу могут ошеломить. Один из способов облегчить работу – выучить некоторые из доступных сочетаний клавиш. Например, нажмите Ctrl + Shift + C (или Cmd + Shift + C на Mac), чтобы открыть инструмент Inspect, или Ctrl + Shift + I (или Cmd + Shift + I на Mac), чтобы открыть окно DevTools. Доступно множество других сочетаний клавиш, поэтому потратьте немного времени, чтобы изучить доступные варианты.
Используйте Device Mode для тестирования адаптивного дизайна
Если вы работаете над адаптивным дизайном, режим Device Mode может оказаться очень полезным. В режиме Device Mode вы можете выбрать одно из распространенных устройств и посмотреть, как будут отображаться страницы на этом устройстве.
Используйте симулятор состояния сети
Симулятор состояния сети – это инструмент, позволяющий моделировать различные сетевые условия. С помощью симулятора сетевых условий вы можете выбрать один из распространенных типов сети и просмотреть свои страницы так, как будто они загружаются через этот тип соединения. Это может быть полезно для проверки того, как ваши страницы будут работать на разных типах устройств и в разных условиях.
Используйте вкладку Performance для измерения производительности
Если вы заинтересованы в измерении производительности ваших страниц в реальном времени, вкладка Performance может оказаться очень полезной. С помощью вкладки Performance вы можете просмотреть информацию о времени загрузки, времени выполнения JavaScript и другие данные. Эта информация может оказаться очень полезной при устранении проблем с производительностью.
Используйте Timeline, чтобы понять узкие места в производительности
Timeline – это инструмент, который позволяет просматривать подробный журнал всех событий, происходящих при загрузке страницы. С помощью Timeline вы можете увидеть, сколько времени занимает каждое событие, и выявить узкие места, которые могут вызывать проблемы с производительностью.
Используйте вкладку Memory для устранения утечек памяти
Вкладка Memory может быть очень полезна, если вы столкнулись с проблемой утечки памяти на своих страницах. С помощью вкладки Memory” вы можете сделать снимок использования памяти на странице, а затем проанализировать этот снимок, чтобы найти области, где память используется неправильно.
Используйте вкладку Audits для повышения производительности
Вкладка Audits – это инструмент, позволяющий автоматически генерировать отчеты о производительности ваших страниц. С помощью вкладки Audits вы можете выбрать один из вариантов аудита, а затем просмотреть отчет, в котором подробно описаны области, в которых ваша страница может быть улучшена.
Используйте расширение PageSpeed Insights
Расширение PageSpeed Insights – это инструмент, позволяющий измерять производительность ваших страниц. С его помощью вы можете создавать отчеты о производительности ваших страниц и получать рекомендации по её улучшению.
Используйте расширение Lighthouse
Расширение Lighthouse – это инструмент, позволяющий создавать отчеты о качестве ваших веб-страниц. С помощью расширения Lighthouse вы можете выбрать один из вариантов аудита, а затем просмотреть отчет, в котором подробно описаны области, где вашу страницу можно улучшить.
Используйте расширение WebPageTest
Расширение WebPageTest – это инструмент, позволяющий измерять производительность ваших страниц. С помощью расширения WebPageTest вы можете создавать отчеты о производительности ваших страниц и получать рекомендации по её улучшению.
Используйте User Timing API
User Timing API – это инструмент, позволяющий оценить производительность ваших страниц с помощью меток и измерений. С помощью User Timing API вы можете установить метки в определенных точках кода, а затем измерить время между этими метками. Эта информация может быть очень полезна при устранении проблем с производительностью.
Используйте Console API
Console API – это инструмент, позволяющий регистрировать сообщения из вашего кода. С помощью Console API вы можете выводить сообщения на консоль, просматривать трассировку стека и многое другое. Эта информация может быть очень полезна при устранении ошибок.
Используйте Debugger API
Debugger API – это инструмент, позволяющий просматривать код строка за строкой. С помощью Debugger API вы можете устанавливать точки останова, просматривать значения переменных и многое другое. Эта информация может быть очень полезна при устранении ошибок.
Используйте профилировщик
Профилировщик (profiler) – это инструмент, позволяющий измерить производительность вашего кода. С помощью профилировщика вы можете делать снимки выполнения кода, а затем просматривать информацию о времени, затраченном на выполнение каждой функции. Эта информация может быть очень полезна при устранении проблем с производительностью.
Используйте расширение Source Maps
Расширение Source Maps – это инструмент, позволяющий отлаживать код с помощью карт исходного кода. С помощью расширения Source Maps вы можете просматривать исходный код ваших файлов, даже если они были минифицированы или скомпилированы. Эта информация может быть очень полезна при устранении ошибок.
Используйте расширение Filter
Расширение Filter – это инструмент, позволяющий фильтровать сообщения журнала по типу. С помощью расширения Filter можно выбрать просмотр только сообщений об ошибках, только предупреждений или только информационных сообщений. Эта информация может быть полезна при устранении ошибок.
Итоги
Ну вот и все! Это лишь базовый обзор того, как DevTools можно использовать для тестирования и отладки веб-страниц. За более подробной информацией обращайтесь к официальной документации по адресу https://developer.chrome.com/docs/devtools/.
Часто задаваемые вопросы по Chrome DevTools:
Какие сочетания клавиш для Chrome DevTools вы знаете?
Существует множество сочетаний клавиш для Chrome DevTools. Некоторые из наиболее часто используемых сочетаний:
Ctrl+Shift+I: Открыть DevTools
Ctrl+F: Открыть панель поиска
Ctrl+Shift+P: Открыть Command Palette.
Как перезагрузить страницу, не обновляя всю вкладку?
Чтобы перезагрузить страницу, не обновляя всю вкладку, нажмите Ctrl+R (Cmd+R на Mac).
Как сохранить снимок экрана страницы?
Чтобы сохранить скриншот страницы, нажмите Ctrl+S (Cmd+S на Mac). Снимок экрана будет сохранен в виде файла .png в папке загрузок.
Как можно измерить производительность страницы?
Чтобы измерить производительность вашей страницы, откройте вкладку Performance. Панель покажет, сколько времени заняла загрузка страницы, сколько ресурсов было загружено и где находятся узкие места.
Как я могу найти и исправить ошибки на своей странице?
Откройте вкладку Console, чтобы найти и исправить ошибки на вашей странице. Консоль покажет вам все ошибки JavaScript на вашей странице, а также предупреждения и сообщения от DevTools.
Как смоделировать другой браузер?
Чтобы смоделировать другой браузер, откройте панель настроек и нажмите кнопку “Change user agent” (Изменить агент пользователя). Выберите нужный браузер из списка.
Как протестировать страницу в Headless Chrome?
Чтобы проверить свою страницу в “безголовом” режиме Chrome, откройте Command Palette и введите ‘Headless’. Выберите опцию “Run in headless mode” (Запуск в безголовом режиме) из списка опций.
Как закрыть DevTools?
Чтобы закрыть DevTools, нажмите Ctrl+W (Cmd+W на Mac). В противном случае вы можете нажать кнопку Close (Закрыть) в правом верхнем углу окна DevTools.
Перевод статьи «Chrome – DevTools: A Complete Guide».