Мобильный эмулятор и поиск избыточного кода: 9 секретных функций Chrome DevTools

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

#1 Контроль скорости сети

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

• Быстрый 3G;
• Медленный 3G;
• Режим офлайн.

Функция доступна во вкладке Network — No throttling. 

#2 Мультикурсор 

Позволяет писать или редактировать код одновременно в нескольких строках. Чтобы запустить, нужно удерживать Ctrl+Alt (Command на Mac) и щелкнуть на нужные строки. Подробный принцип работы описан здесь. 

#3 Темный режим 

Автор считает, что темный режим увеличивает видимость и снижает нагрузку на глаза. Чтобы его включить, откройте Settings, щелкнув на … в правом верхнем углу экрана, затем: Preferences  — Appearance — Theme — Dark. 

#4 Командное меню 

Можно открыть командное меню нажав Ctrl (Command на Mac) + Shift + P. Он обеспечивает быструю навигацию по DevTools. Анураг Канория утверждает, что эта функция особенно удобна тем, кто знаком с палитрой команд (Command Palette) Visual Studio Code.

#5 Обнаружение неиспользуемого кода 

Функция позволяет искать избыточный код, который может снижать скорость сайта. Для ее запуска щелкните на … в правом верхнем углу экрана DevTools, затем выберите More Tools и Coverage и перезагрузите страницу. На отобразившейся панели появится неиспользуемый код JavaScript.

 #6 Автозапуск 

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

В настройках найдите опцию (Settings — Global) для автоматического открытия DevTools для всплывающих окон. Второй вариант — запускать DevTools не только во всплывающих окнах, но и в браузере Chrome. Это можно сделать, добавив следующую строку в качестве свойства в Google Chrome:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs

#для пользователей Windows

--auto-open-devtools-for-tabs

#для пользователей Mac

О других опциях для включения DevTools можно узнать здесь. 

#7 Палитра цветов

С помощью этой функции можно выбрать нужный цвет и добавить его в CSS сайта.  Чтобы получить доступ к палитре, перейдите на вкладку Elements  и выберите там Styles, чтобы увидеть CSS. Затем нажмите на цветной квадрат (не на значение) и появится палитра цветов. 

#8 Мобильный эмулятор

Функция представляет собой мобильный эмулятор с предопределенными высотой и шириной, которые соответствуют некоторым популярным мобильным устройствам, таким как iPhone, Pixel, Surface и iPad. 

Для запуска откройте DevTools и щелкните на панели инструментов кнопку Toggle Device Toolbar. 

#9 Брейкпойнты 

 Это опция просмотра медиа-запросов с таких сайтов, как, например, YouTube. 

Для запуска щелкните на … и нажмите Show media queries. Откроется новая панель, показывающая брейкпойнты медиа-запросов.

Также можно установить брейкпойнты в коде JavaScript. Один из способов — написать в коде debugger, который приостанавливает выполнение кода при достижении брейкпойнта: 

console.log('a');
console.log('b');
debugger;
console.log('c');

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