Мобильный эмулятор и поиск избыточного кода: 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, а затем к файлу кода и найти строку, в которой хотите приостановить выполнение кода. Затем нужно щелкнуть на номер строки в левой части кода, что приведет к появлению синего значка на номере строки. Это и есть брейкпойнт.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: