Назад

10 лайфхаков для Chrome DevTools

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

1. Имитация медленных сетевых подключений и устройств

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

2. Подбор цвета

Выбор правильного цвета для элементов сайта может оказаться трудоемкой задачей. С помощью инструмента выбора цвета Chrome DevTools вы можете легко выбирать цвета прямо на веб-странице. Просто щелкните на маленьком квадратике с изображением цвета, чтобы открыть окно выбора цвета. Пока цветовое меню активно, можно навести курсор на элементы веб-страницы и мгновенно получить значение цвета для данного пикселя. Если окно выбора цвета не отображается, нажмите "Toggle color picker", чтобы включить его. Кроме того, для изменения формата цвета можно использовать комбинацию клавиш Shift + щелчок на квадратике цветомера.

3. Аудиты производительности, SEO и безопасности

В Chrome DevTools имеется встроенный инструмент аудита, позволяющий анализировать производительность, SEO, безопасность и другие параметры сайта. Запустив аудит, можно получить ценные сведения о тех областях, которые нуждаются в улучшении. В Chrome 83 панель "Аудиты" была переименована в "Маяк". Чтобы запустить аудит, просто перейдите на вкладку "Lighthouse" и следуйте инструкциям. Используйте этот инструмент для оптимизации своего сайта и обеспечения его соответствия самым высоким стандартам.

4. Красивая печать для минифицированного кода

Минифицированный код бывает трудно читать и понимать. С помощью Chrome DevTools можно легко преобразовать минифицированный код в более удобный для чтения формат, используя функцию "Pretty Print". Для этого просто нажмите кнопку "{}" на вкладке Sources. В результате код станет более красивым, что облегчит навигацию и отладку.

5. Быстрое переключение между файлами

Навигация по большой кодовой базе может отнимать много времени, особенно если необходимо найти конкретный файл. В Chrome DevTools реализована функция быстрого переключения между файлами, которая позволяет перейти непосредственно к файлу, не открывая вкладку Sources. Просто нажмите Cmd/Ctrl + P и введите имя файла. Нажмите Enter, и вы перейдете непосредственно к искомому файлу. Если перед именем файла добавить ">", то быстрый переключатель файлов превратится в быстрое командное меню (Cmd/Ctrl + Shift + P), что сделает навигацию еще более эффективной.

6. Отзывчивый режим для тестирования мобильных устройств

Тестирование отзывчивости сайта при различных размерах и ориентации экрана очень важно для обеспечения бесперебойной работы пользователей. Chrome DevTools упрощает эту задачу благодаря функции "отзывчивый режим". Переключиться в отзывчивый режим можно, нажав Cmd/Ctrl + Shift + M или щелкнув на значке устройства в левом верхнем углу. По умолчанию отзывчивый режим позволяет просматривать сайт на экранах различных размеров и ориентации. В меню "Дополнительные параметры" (изображенном тремя вертикальными точками) можно найти другие полезные инструменты.

7. Скриншоты для полностраничных снимков

Создание скриншотов сайта часто необходимо для документации или демонстрации. Chrome DevTools позволяет делать полностраничные скриншоты, захватывая всю веб-страницу, а не только ее видимую часть. Чтобы сделать снимок экрана, воспользуйтесь меню быстрых команд (Shift + Cmd/Ctrl + P) и введите "screenshot". Это запустит процесс создания снимка экрана, и у вас появится возможность сохранить полностраничный снимок.

8. Расширения для расширенной разработки

Инструментарий Chrome DevTools может быть расширен за счет установки расширений. Многие фреймворки и технологии имеют собственные специализированные расширения DevTools, например Vue, Angular, React и другие. Эти расширения предоставляют дополнительные возможности и ярлыки, специально разработанные для этих технологий. При наличии опыта можно также создать собственное расширение. В веб-магазине Chrome можно найти следующие расширения

9. Покрытие кода для оптимизации

Оптимизация кода на стороне клиента подразумевает предоставление только того, что необходимо для работы веб-страницы. Покрытие кода - это полезная функция в Chrome DevTools, которая позволяет выявить неиспользуемый CSS- и JS-код. Чтобы перейти на вкладку "Покрытие кода", воспользуйтесь меню быстрых команд (Cmd/Ctrl + Shift + P) и выберите пункт "Показать покрытие". Инструмент покрытия кода начнет запись и отобразит визуальное представление используемого и неиспользуемого кода. Красным цветом обозначен неиспользуемый код, зеленым - используемый. Если щелкнуть на файле, то он откроется с той же цветовой схемой, что позволит выявить и оптимизировать неиспользуемый код. Обратите внимание, что код, не используемый при загрузке страницы, может быть использован во время выполнения, поэтому обязательно протестируйте все функциональные возможности.

10. Будьте в курсе новых возможностей

Инструментарий Chrome DevTools постоянно развивается, в нем регулярно появляются новые функции и улучшения. Чтобы быть в курсе последних улучшений, Google предлагает серию видеороликов под названием "Что нового в DevTools". Каждый крупный выпуск Chrome сопровождается новым видеороликом, рассказывающим о последних нововведениях. Следите за этими видеороликами, чтобы быть в курсе последних возможностей и использовать их по максимуму.

Бонусный совет: Темная тема.

Если вы предпочитаете более темный интерфейс при работе в Chrome DevTools, вы можете включить темную тему. Для этого нажмите на три вертикальные точки рядом с кнопкой закрытия, перейдите в раздел "Настройки", перейдите на вкладку "Внешний вид" и выберите темную тему. Кроме того, для доступа к настройкам и внесения изменений можно использовать упомянутое ранее меню быстрых команд. Темная тема обеспечивает более приятную визуальную среду для кодирования и отладки.

Использование Chrome DevTools Lifehacks

В заключение можно сказать, что Chrome DevTools - это незаменимый инструмент для веб-разработчиков. Используя эти десять важных хаков, вы сможете повысить производительность, оптимизировать работу сайта и упростить процесс отладки. Следите за новыми функциями и изучайте огромное количество расширений, чтобы использовать все возможности Chrome DevTools. Счастливого кодинга!

Источник: https://telegra.ph/sitodel-03-30