От автора: за последнее десятилетие инструменты разработчика браузеров (браузер DevTools) превратились из базовых JavaScript-консолей в полностью интегрированные среды разработки и отладки. Стало возможным изменять и проверять любой аспект вашего веб-приложения, но лишь немногие из нас выходят за рамки базового использования.
В этой серии статей мы рассмотрим ряд функций, которые вы могли бы (или нет) использовать. Chrome DevTools описаны во множестве источников, но мы представим вам альтернативные опции для Chrome, как и для Firefox.
Горячие клавиши
Использование меню для запуска DevTools — это трата впустую драгоценных секунд! Попробуйте вместо этого один из следующих вариантов горячих клавиш:
F12
ctrl + shift + i
cmd + option + j
или кликните правой кнопкой мыши любом элементе страницы и выберите «Просмотреть код» или «Просмотреть код элемента».
Chrome предоставляет полезную помощь по сочетанию клавиш. В DevTools нажмите F1или выберите «Настройки» в трехточечном меню в правом верхнем углу. Затем выберите из меню «Ярлыки»:
Перемещение DevTools
Панель DevTools может быть прикреплена слева, справа или снизу окна браузера. Если вам требуется больше места, отсоедините ее от отдельного окна. Опции размещения находятся в главном трехточечном меню Chrome:
и Firefox:
Настройки
Доступ к настройкам 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:
Он обеспечивает быстрый доступ к большинству функций и исходным файлам (нажмите Backspace, чтобы удалить).
Окно консоли
Консоль полезна независимо от того, какую панель DevTool вы используете. Нажмите Esc чтобы показать и скрыть окно консоли в нижней панели.
Найти цвета страницы
Большинство браузеров показывают палитру цветов, когда вы кликаете любое свойство цвета CSS. Chrome также отображает цвета, используемые на странице внизу панели:
На панели можно кликнуть, чтобы посмотреть другие цвета.
Доступность цветового контраста
Палитра цветов также показывает коэффициент контрастности, который указывает на визуальную разницу между текстом переднего плана и цветом фона. Нажмите на соотношение, чтобы увидеть, как это соответствует стандартам доступности AA и AAA, которые гарантируют, что текст может быть прочитан большинством людей:
Любой цвет ниже линии на цветовой шкале будет соответствовать рекомендациям по контрастности AA.
Скриншоты
В палитре команд Chrome ( ctrl + shift + p) введите «снимок экрана», затем выберите параметр для захвата текущего окна просмотра, всей страницы или активного в данный момент элемента. Файл будет сохранен в папке загрузок. (Chrome 74+ также позволяет захватывать области.)
Firefox предоставляет систему «Сделать снимок экрана», доступную в большинстве меню. Кроме того, вы можете кликнуть правой кнопкой мыши любой элемент в представлении DOM и выбрать Снимок узла.
Найти неиспользуемые CSS и JavaScript
Новая панель покрытия Chrome позволяет быстро находить неиспользуемый код. Выберите «Покрытие» в подменю DevTools Другие инструменты», затем нажмите кнопку записи и найдите свое приложение. Затем кликните на любом файле, чтобы открыть его источник:
Неиспользуемый код выделяется красным цветом в строке с номером строки. Обратите внимание, что Chrome не запоминает используемый / неиспользуемый код при переходе на новую страницу, но я ожидаю, что это будет предоставлено в следующем релизе.
Отключить сетевой кэш
Установите флажок «Отключить кэш» в панели «Сеть», чтобы загрузить все файлы из сети. Это обеспечивает лучшую оценку загрузки страниц в первый раз.
Дросселирование скорости сети
Точно так же нет смысла тестировать вашу систему на скорости 1 Гбит / с, когда большинство пользователей получают доступ через 3G. Панель «Сеть» предоставляет раскрывающийся список «Онлайн» в Chrome и «Регулирование» в Firefox, позволяющий эмулировать определенные скорости сети.
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-адреса или домены:
Воссоздать Ajax-запросы
Операции Ajax XMLHttpRequest можно проверить, кликнув правой кнопкой мыши их запись в таблице «Сеть», а затем выбрав параметр копирования, например cURL, fetch или PowerShell. Это создает команду с одинаковыми заголовками, пользовательским агентом, файлами cookie и ссылками, которые можно вставить в редактор или терминал.
Включить автономные переопределения файлов
Chrome позволяет сохранить любой файл в системе, чтобы браузер получал его с устройства, а не из сети. Это может позволить выполнять автономную разработку, если, например, вы хотите загрузить или отредактировать ресурсы, к которым обычно обращаются через CDN.
Откройте панель «Переопределения» в «Источниках», нажмите «+ Выбрать папку для переопределений» и выберите нужную папку.
Теперь кликните правой кнопкой мыши любой ресурс в панели «Сеть» и выберите «Сохранить для переопределений». Любая последующая перезагрузка страницы будет обращаться к файлу из вашей локальной системы, а не из Интернета. Сохраненный файл также можно изменить.
Исследуйте Хранилище
Панель «Приложения» в Chrome и панель «Хранилище» в Firefox позволяют просматривать, изменять и удалять значения, хранящиеся в файлах cookie, кэш-памяти, localStorage, sessionStorage, IndexedDB и Web SQL (если поддерживается).
Через панель «Очистить» в Chrome также можно стереть все значения для домена, что может быть полезно при разработке Progressive Web App.
Монитор производительности
Доступ к новому монитору производительности Chrome можно получить из меню «Дополнительные инструменты», который предоставляет анализ использования процессора, размера JavaScript, узлов DOM, прослушивателей событий, пересчетов стилей и многого другого. В отличие от основной панели «Производительность», графики обновляются в режиме реального времени — нет необходимости сначала записывать профиль.
Аудит
Панель «Аудит» Chrome изначально была разработана для оценки функциональности Progressive Web App, но этот инструмент превратился в инструмент общего назначения для анализа производительности, доступности, лучших практик и SEO как в мобильных, так и в настольных системах.
Он не выявляет все проблемы, и вы можете не согласиться с некоторыми моментами, но это полезный способ быстрой оценки потенциальных проблем. Я надеюсь, что вы узнали что-то новое из этой статьи. Скоро появятся другие секреты DevTool…
Автор: Craig Buckler
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.