Вы о них не знали: 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.
Какие из них вам уже были известны? А какими пользуетесь вы? Делитесь своими вариантами в комментариях.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: