Вы о них не знали: 5 экспериментальных функций Chrome DevTools

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

#1 CSS Overview

CSS Overview дает информацию об используемом на веб-странице CSS. 

Он включает подробные данные о: 

• Цветах;
• Шрифтах;
• Медиа-запросах;
• Проблемах с контрастностью;
• Неиспользуемых объявлениях.

Чтобы включить функцию нужно: 

• Нажать в Chrome на кнопку View → Developer → Developer Tools;
• Открыть Settings;
• Щелкнуть на вкладку Experiments;
• Включить CSS Overview;
• Перезапустить DevTools;
• После этого в DevTools появится новая вкладка CSS Overview.

#2 CSP Violations

Предупреждает пользователя о возможных уязвимостях безопасности. Брейкпоинты Chrome DevTools CSP Violation отлавливают возможные исключения, связанные с нарушениями CSP и указывают на них в коде. 

Грубо говоря, это дополнительный уровень безопасности для приложения, способный уменьшить уязвимости типа XSS. 

Чтобы включить функцию нужно: 

• В DevTools перейти на вкладку Experiments;
• Установить флажок Show CSP Violations View;
• Перезапустить DevTools;
• В разделе CSP Violations Breakpoints отметьте Trusted Type Violations и Violations Types.

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

#3 New Font Editor Tools

Позволяет поменять шрифт на сайте и посмотреть, как он будет смотреться, не трогая код в режиме реального времени. 

Чтобы включить функцию нужно: 

• В DevTools перейти на вкладку Experiments;
• Установить флажок Enable New Font Editor Tools на панели стилей;
• Перезапустить DevTools;
• Выбрать HTML-элемент, который включает свойства шрифта, которые нужно изменить;
• После этого на панели стилей должен появиться значок Font Editor.

#4 Dual Screen Mode

Функция эмуляции двойного экрана для складных устройств вроде Surface Duo. Позволяет отлаживать веб-приложение на устройствах с двумя экранами в эмуляторе Chrome DevTools. 

Чтобы включить функцию нужно: 

• В DevTools перейти на вкладку Experiments;
• Поставить флажок Emulation: Support dual-screen mode;
• Перезапустить DevTools;
• Открыть веб-страницу, которую хотите протестировать с помощью опции Toggle Device Toolbar в правом верхнем углу DevTools;
• Переключите эмулятор на доступное складное устройство;
• Нажмите Toggle dual-screen mode.

#5 Full Accessibility Tree View

С помощью Full Accessibility Tree View можно проверить доступные объекты, созданные для каждого элемента DOM. Эта функции похожа на вкладку Inspect Elements, но дает больше информации о доступности веб-приложения. 

Чтобы включить функцию нужно: 

• В DevTools перейти на вкладку Experiments;
• Поставить галочку Full Accessibility Tree View на панели Elements;
• Перезапустить DevTools;
• Переключить Elements View Mode на Full Accessibility Tree View, нажав кнопку специальных возможностей на панели Elements.

Какие из них вам уже были известны? А какими пользуетесь вы? Делитесь своими вариантами в комментариях.