Пн. Янв 17th, 2022

Сокрытые функции Google Chrome для разработчика

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

1. Обзор CSS

Обзор CSS предоставляет сводку всех стилей, применяемых на веб-странице. Он включает подробную информацию о цветах, шрифтах, медиа-запросах и неиспользуемых объявлениях. Эта функция понадобится, когда вы вносите изменения в пользовательский интерфейс CSS, и вам больше не необходимо использовать сторонние инструменты, такие как гамма цветов.

Сокрытые функции Google Chrome для разработчика

Вкладка Обзор CSS в Инструментах разработчика Chrome

Как включить эту функцию?

В Гугл Chrome перейдите «Представление» — «Разработчику» — «Инструменты разработчика».

Откройте Опции.

Выберете вкладку Экспериментальные функции.

Включите обзор CSS.

Закройте окно DevTools и откройте его опять.

В DevTools появится новенькая вкладка под названием Обзор CSS.

Невзирая на то, что панель обзора CSS является экспериментальной функцией, вы никогда не отключите ее после использования. Эта функция неописуемо полезна и значительно упрощает работу с CSS.

2. CSP Violations — предупреждения о вероятных уязвимостях безопасности

Точки останова CSP violations в Chrome DevTools перехватывают вероятные исключения, связанные с нарушениями CSP, и указывают на их в коде.

Включение этой функции добавит дополнительный уровень безопасности вашему приложению и уменьшит уязвимости, такие как межсайтовый скриптинг (XSS).

Сокрытые функции Google Chrome для разработчика

Chrome автоматом определяет возможное нарушение CPS и выделяет код ошибки

Как включить эту функцию?

Разработчики имеют возможность включить точки останова CSP на вкладке «Источники», как обозначено ниже.

Перейдите на вкладку Экспериментальные функции в Chrome DevTools.

Установите флаг Показать нарушения CSP.

Закройте окно DevTools и откройте его опять.

В разделе «Точки останова при нарушениях CSP» отметьте «Нарушения доверенного типа» и типы нарушений, чтоб активировать эту функцию.

Chrome DevTools даже указывает дополнительные сведения об их исправлении прямо перед уязвимым блоком кода.

Сокрытые функции Google Chrome для разработчика

Включение точек останова при нарушении CSP в инструментах разработчика Chrome

3. Новые инструменты для редактирования шрифтов — секундное отображение стилей шрифтов

Понимаете ли вы, что можете мгновенно поменять все шрифты на веб-сайте и поглядеть, как они выглядят, не касаясь кода?

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

Сокрытые функции Google Chrome для разработчика

Изменение стилей шрифтов с помощью панели стилей Chrome

Как включить эту функцию?

Перейдите на вкладку Экспериментальные функции в Chrome DevTools.

Установите флаг «Включить новые инструменты редактора шрифтов на панели стилей».

Закройте окно DevTools и откройте его опять.

Выберите элемент HTML, который включает характеристики шрифта, которые вы хотите изменить.

Вы заметите значок редактора шрифтов на панели стилей.

4. Режим двойного экрана — имитация двойного экрана для раскладных устройств

Включив режим двойного экрана, вы сможете отлаживать свое веб-приложение на устройствах с 2-мя экранами в самом эмуляторе Chrome DevTools. Эта функция помогает при отладке устройств с 2-мя экранами, таких как Surface Duo.

Сокрытые функции Google Chrome для разработчика

Эмуляция двойного экрана в Chrome DevTools

Как включить эту функцию?

Перейдите на вкладку Экспериментальные функции в Chrome DevTools.

Выберете Эмуляция: помощь двухэкранного режима.

Закройте окно DevTools и откройте его опять.

Откройте веб-страницу, которую вы желаете протестировать, с помощью опции Toggle Device Toolbar в правом верхнем углу окна DevTool.

Переключите эмулятор на устройство Surface Duo (либо другое доступное складное устройство).

Потом нажмите «Переключить двухэкранный режим», чтобы эмулировать ваше веб-приложение в двухэкранном режиме.

5. Полное древовидное представление доступности — просматривайте элементы с более подробной информацией об их доступности

С помощью дерева доступности в Chrome DevTools вы сможете проверять доступность объектов, созданных для каждого элемента DOM.

Эта функция незначительно похожа на функцию «Проверить элементы». Но она позволяет вам копнуть поглубже и получить больше деталей доступности в вашем веб-приложении.

Сокрытые функции Google Chrome для разработчика

Полное представление дерева особых возможностей на панели DevTools Elements

Как включить эту функцию?

Перейдите на вкладку Экспериментальные функции в Chrome DevTools.

Выберете древовидное представление полной доступности на панели «Элементы».

Закройте окно DevTools и откройте его опять.

Переключите Режим просмотра частей на Древовидное представление с полным доступом, нажав кнопку особых возможностей на панели «Элементы».

Заключение

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

Создатель: Yasas Sri Wickramasinghe

Редакция: Команда webformyself.

Докладывает webformyself.com

от Admin

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *