10 полезных хитростей Chrome DevTools

1) Медленная сеть и имитатор устройств

Тот факт, что веб-сайт работает быстро на вашем игровом ПК со скоростью загрузки 10 ГБ / с, не означает, что он быстрый для большинства пользователей. Старые телефоны, использующие медленные соединения, все еще используются.

Откройте вкладку производительности и щелкните значок шестеренки в правом верхнем углу, чтобы отобразить параметры медленного моделирования сети и регулирования ЦП.

2) Селектор цвета

Щелкните маленький квадратик, представляющий цвет, чтобы открыть селектор цвета.

Пока включен селектор цвета, вы можете навести указатель мыши на свою веб-страницу и использовать палитру цветов, чтобы сразу получить цвет именно этого пикселя!

Маленький квадратик чтобы открыть селектор цветов, имеет еще один трюк в кармане: Shift+щелкните по нему, чтобы изменить цветовой формат.

3) Аудиты (Audits)

Попробуйте тестировать свой веб-сайт с помощью встроенного в Chrome инструмента аудита. Используя эту функцию, Вы получите ценную информацию о производительности, SEO, безопасности и многом другом. С Chrome 83 панель «Audits» теперь называется «Lighthouse».

4) Симпатичный принт

Пытаетесь посмотреть минимизированный исходный код? Нажмите кнопку {}!

5) Быстрый переключатель файлов

Вам не нужно открывать вкладку с исходным кодом, если вы знаете имя файла.

• Просто нажмите cmd / ctrl + p
• Введите имя файла
• Нажмите клавишу ввода

Обратите внимание, что добавление «>» превратит ваш быстрый переключатель файлов в меню быстрых команд (cmd / ctrl + shift + p тоже приведет вас прямо туда).

6) Отзывчивый режим

CSS может стать сложным, на грани адского. Но опять же, инструмент Developer Console может оказаться полезным.

Переключите панель инструментов устройства с помощью ctrl / cmd + shift + M или вы можете…

Для большинства людей все, что им нужно - это просто смотреть на свой веб-сайт с экрана разных размеров и ориентации.

Но взгляните на другое раскрывающееся меню под названием «Дополнительные параметры» (представленное тремя вертикальными точками), и вы сможете найти инструменты, о которых вы не знали.

7) Скриншоты

Заметили «Сделать снимок экрана» на последнем изображении?

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

Чтобы сделать снимок экрана, необязательно находиться в адаптивном режиме. Воспользуйтесь меню быстрых команд (shift + cmd / ctrl + p) и введите «screenshot».

8) Расширения

Вы можете установить расширения в Chrome Developer Console. У многих фреймворков есть собственные расширения, упрощающие разработку с их технологиями (Vue, Angular, React и т. д.).

Вы даже можете создать свой собственный, если у вас есть пять свободных минут.

9) Покрытие

Хороший способ оптимизировать клиентский код - поставлять меньше клиентского кода. Охват - это помощь в обнаружении неиспользуемых CSS и JS.

Откройте вкладку покрытия с помощью меню команд ctrl / cmd + shift + p, Показать покрытие.

Вы используете вкладку «Покрытие», записывая, что происходит.

Перезагрузите страницу во время записи, и вы начнете получать информацию.

Очевидно, что красный цвет означает неиспользованный, а зеленый - использованный. Если вы щелкните файл, он откроется с той же логикой цветового кодирования.

Обратите внимание, что код, не используемый при загрузке страницы, не обязательно означает, что код вообще не используется! Используйте функциональные возможности своей страницы во время записи, и вы, скорее всего, увидите, что процент использования кода выше.

10) Идти в ногу с новыми функциями

Chrome DevTools постоянно обновляется. К счастью, Google позволяет легко следить за своей серией видеороликов «Что нового в DevTools». Каждый раз, когда выпускается новая основная версия Chrome, выходит новое видео. Я настоятельно рекомендую наблюдать за их выходом.

Бонус

Вы могли заметить, что в моих инструментах разработчика есть темная тема. Включите её, щелкнув три вертикальные точки рядом с X ➔ Настройки ➔ Внешний вид ➔ Тема.

Или используйте меню команд, о котором я постоянно упоминал!

Надеюсь, вы кое-что узнали от статьи. Удачи в кодировании!

Ссылка на канал: https://t.me/sitodel