Секреты Chrome DevTools: запуск, сеть и производительность

Секреты Chrome DevTools: запуск, сеть и производительность

От автора: за последнее десятилетие инструменты разработчика браузеров (браузер DevTools) превратились из базовых JavaScript-консолей в полностью интегрированные среды разработки и отладки. Стало возможным изменять и проверять любой аспект вашего веб-приложения, но лишь немногие из нас выходят за рамки базового использования.

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

Горячие клавиши

Использование меню для запуска DevTools — это трата впустую драгоценных секунд! Попробуйте вместо этого один из следующих вариантов горячих клавиш:

F12

ctrl + shift + i

cmd + option + j

или кликните правой кнопкой мыши любом элементе страницы и выберите «Просмотреть код» или «Просмотреть код элемента».

Chrome предоставляет полезную помощь по сочетанию клавиш. В DevTools нажмите F1или выберите «Настройки» в трехточечном меню в правом верхнем углу. Затем выберите из меню «Ярлыки»:

Секреты Chrome DevTools: запуск, сеть и производительность

Перемещение DevTools

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

Секреты Chrome DevTools: запуск, сеть и производительность

и Firefox:

Секреты Chrome DevTools: запуск, сеть и производительность

Настройки

Доступ к настройкам DevTool можно получить из того же меню или нажав F1. Это позволяет вам устанавливать такие параметры, как отображаемые инструменты, тема, размеры вкладок и многое другое.

Автозапуск DevTools

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

chrome --auto-open-devtools-for-tabs http://localhost:8000/

где http://localhost:8000/ — это ваш URL для разработки. Аналогично для Firefox:

firefox -devtools -url http://localhost:8000/

(Имя исполняемого файла может отличаться в разных системах.)

Режим инкогнито во время разработки

Инкогнито / приватный режим не сохраняет данные, такие как куки и localStorage, после закрытия браузера. Режим идеально подходит для тестирования Progressive Web Apps (PWA) и систем авторизации.

Вы можете запустить браузер в режиме инкогнито вручную или добавив в командную строку Chrome —incognito или Firefox —private.

Палитра команд

Chrome DevTools предлагает редактор-палитру команд. Нажмите ctrl + shift + p:

Секреты Chrome DevTools: запуск, сеть и производительность

Он обеспечивает быстрый доступ к большинству функций и исходным файлам (нажмите Backspace, чтобы удалить).

Окно консоли

Консоль полезна независимо от того, какую панель DevTool вы используете. Нажмите Esc чтобы показать и скрыть окно консоли в нижней панели.

Найти цвета страницы

Большинство браузеров показывают палитру цветов, когда вы кликаете любое свойство цвета CSS. Chrome также отображает цвета, используемые на странице внизу панели:

Секреты Chrome DevTools: запуск, сеть и производительность

На панели можно кликнуть, чтобы посмотреть другие цвета.

Доступность цветового контраста

Палитра цветов также показывает коэффициент контрастности, который указывает на визуальную разницу между текстом переднего плана и цветом фона. Нажмите на соотношение, чтобы увидеть, как это соответствует стандартам доступности AA и AAA, которые гарантируют, что текст может быть прочитан большинством людей:

Секреты Chrome DevTools: запуск, сеть и производительность

Любой цвет ниже линии на цветовой шкале будет соответствовать рекомендациям по контрастности AA.

Скриншоты

В палитре команд Chrome ( ctrl + shift + p) введите «снимок экрана», затем выберите параметр для захвата текущего окна просмотра, всей страницы или активного в данный момент элемента. Файл будет сохранен в папке загрузок. (Chrome 74+ также позволяет захватывать области.)

Firefox предоставляет систему «Сделать снимок экрана», доступную в большинстве меню. Кроме того, вы можете кликнуть правой кнопкой мыши любой элемент в представлении DOM и выбрать Снимок узла.

Найти неиспользуемые CSS и JavaScript

Новая панель покрытия Chrome позволяет быстро находить неиспользуемый код. Выберите «Покрытие» в подменю DevTools Другие инструменты», затем нажмите кнопку записи и найдите свое приложение. Затем кликните на любом файле, чтобы открыть его источник:

Секреты Chrome DevTools: запуск, сеть и производительность

Неиспользуемый код выделяется красным цветом в строке с номером строки. Обратите внимание, что Chrome не запоминает используемый / неиспользуемый код при переходе на новую страницу, но я ожидаю, что это будет предоставлено в следующем релизе.

Отключить сетевой кэш

Установите флажок «Отключить кэш» в панели «Сеть», чтобы загрузить все файлы из сети. Это обеспечивает лучшую оценку загрузки страниц в первый раз.

Дросселирование скорости сети

Точно так же нет смысла тестировать вашу систему на скорости 1 Гбит / с, когда большинство пользователей получают доступ через 3G. Панель «Сеть» предоставляет раскрывающийся список «Онлайн» в Chrome и «Регулирование» в Firefox, позволяющий эмулировать определенные скорости сети.

Секреты Chrome DevTools: запуск, сеть и производительность

Chrome также предоставляет возможность добавлять собственные дросселирующие профили.

Изменить порядок сетевых ответов

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

Фильтр незавершенных запросов

Чтобы обнаружить неполные или неотвечающие HTTP-запросы, откройте панель «Сеть» и введите is:running в поле «Фильтр».

Фильтр по размеру ответа

В панели «Сеть» введите larger-than:S в поле фильтр , где S — это размер в байтах (1000000), килобайтах (1000k) или мегабайтах (1M). Будут показаны ответы больше, чем выбранный размер. Чтобы найти ответы, которые меньше, используйте -larger-than:S.

Фильтровать сторонний контент

В панели «Сеть» введите -domain:*.yourdomain в поле фильтр , где yourdomain — это ваш основной URL, например sitepoint.com. В оставшихся ответах отображаются сторонние запросы к CDN, трекерам, кнопкам социальных сетей и т. д. Количество запросов и размеры полезной нагрузки отображаются в строке состояния под таблицей.

Блокировка сетевых запросов

Во время тестирования можно заблокировать трекеры, аналитику, виджеты социальных сетей или любые другие запросы. Кликните правой кнопкой мыши любой HTTP-запрос в панели «Сеть» Chrome и выберите «Блокировать URL-адрес запроса», чтобы заблокировать этот URL-адрес, или «Блокировать домен запроса», чтобы заблокировать любой запрос к этому домену. Откроется панель блокировки запросов, где вы можете добавить или удалить дополнительные URL-адреса или домены:

Секреты Chrome DevTools: запуск, сеть и производительность

Воссоздать Ajax-запросы

Операции Ajax XMLHttpRequest можно проверить, кликнув правой кнопкой мыши их запись в таблице «Сеть», а затем выбрав параметр копирования, например cURL, fetch или PowerShell. Это создает команду с одинаковыми заголовками, пользовательским агентом, файлами cookie и ссылками, которые можно вставить в редактор или терминал.

Включить автономные переопределения файлов

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

Откройте панель «Переопределения» в «Источниках», нажмите «+ Выбрать папку для переопределений» и выберите нужную папку.

Секреты Chrome DevTools: запуск, сеть и производительность

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

Исследуйте Хранилище

Панель «Приложения» в Chrome и панель «Хранилище» в Firefox позволяют просматривать, изменять и удалять значения, хранящиеся в файлах cookie, кэш-памяти, localStorage, sessionStorage, IndexedDB и Web SQL (если поддерживается).
Через панель «Очистить» в Chrome также можно стереть все значения для домена, что может быть полезно при разработке Progressive Web App.

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

Доступ к новому монитору производительности Chrome можно получить из меню «Дополнительные инструменты», который предоставляет анализ использования процессора, размера JavaScript, узлов DOM, прослушивателей событий, пересчетов стилей и многого другого. В отличие от основной панели «Производительность», графики обновляются в режиме реального времени — нет необходимости сначала записывать профиль.

Секреты Chrome DevTools: запуск, сеть и производительность

Аудит

Панель «Аудит» Chrome изначально была разработана для оценки функциональности Progressive Web App, но этот инструмент превратился в инструмент общего назначения для анализа производительности, доступности, лучших практик и SEO как в мобильных, так и в настольных системах.

Секреты Chrome DevTools: запуск, сеть и производительность

Он не выявляет все проблемы, и вы можете не согласиться с некоторыми моментами, но это полезный способ быстрой оценки потенциальных проблем. Я надеюсь, что вы узнали что-то новое из этой статьи. Скоро появятся другие секреты DevTool…

Автор: Craig Buckler

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.