Что нового в DevTools (Chrome 75)

Kayce Basques

Привет! Вот что нового в Chrome DevTools в Chrome 75.

Видеоверсия этой страницы

Значимые предустановленные значения при автозаполнении функций CSS

Некоторые свойства CSS, такие как filter , принимают функции в качестве значений. Например, filter: blur(1px) добавляет 1-пиксельное размытие к узлу. При автозаполнении свойств, таких как filter , DevTools теперь заполняет свойство осмысленным значением, чтобы вы могли предварительно просмотреть, какое изменение значение будет иметь в узле.

Рисунок 1. Старое поведение автозаполнения. DevTools выполняет автозаполнение для filter: blur и никаких изменений не видно в области просмотра.

Рисунок 2. Новое поведение автозаполнения. DevTools выполняет автозаполнение для filter: blur(1px) , и изменение видно в области просмотра.

Соответствующая проблема Chromium: #931145

Очистить данные сайта из меню команд

Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд, а затем выполните команду «Очистить данные сайта », чтобы очистить все данные, связанные со страницей, включая: Service workers , localStorage , sessionStorage , IndexedDB , Web SQL , Cookies , Cache и Application Cache .

Рисунок 3. Команда «Очистить данные сайта» .

Очистка данных сайта уже некоторое время доступна из Application > Clear Storage . Новая функция в Chrome 75 — возможность запустить команду из меню Command.

Если вы не хотите удалять все данные сайта, вы можете контролировать, какие данные будут удалены, в разделе Приложение > Очистить хранилище .

Рисунок 4. Приложение > Очистить хранилище .

Соответствующая проблема Chromium: #942503

Просмотреть все базы данных IndexedDB

Ранее Application > IndexedDB позволял вам проверять базы данных IndexedDB только из основного источника. Например, если на вашей странице был <iframe> , и этот <iframe> использовал IndexedDB, вы не смогли бы увидеть его базу данных(ы). Начиная с Chrome 75, DevTools показывает базы данных IndexedDB для всех источников.

Рисунок 5. Старое поведение. Страница встраивает демо, которое использует IndexedDB, но базы данных не видны.

Рисунок 6. Новое поведение. Базы данных демо видны.

Соответствующая проблема Chromium: #943770

Просмотр несжатого размера ресурса при наведении курсора

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

Рисунок 7. Наведение курсора на столбец «Размер» для просмотра несжатого размера ресурса.

Соответствующая проблема Chromium: #805429

Встроенные точки останова на панели точек останова

Предположим, что вы добавляете точку останова в следующую строку кода:

document.querySelector('#dante').addEventListener('click', logWarning);

DevTools уже некоторое время позволяет вам указывать, когда именно он должен останавливаться на точке останова, например: в начале строки, перед вызовом document.querySelector('#dante') или перед вызовом addEventListener('click', logWarning) . Если вы включите все 3, вы по сути создадите 3 точки останова. Ранее панель Breakpoints не давала вам возможности управлять этими 3 точками останова по отдельности. Начиная с Chrome 75 каждая встроенная точка останова получает свою собственную запись на панели Breakpoints .

Рисунок 8. Старое поведение. На панели Breakpoints есть только 1 запись.

Рисунок 9. Новое поведение. На панели Breakpoints есть 3 записи.

Соответствующая проблема Chromium: #927961

Количество ресурсов IndexedDB и Cache

Панели IndexedDB и Cache теперь показывают общее количество ресурсов в базе данных или кэше.

Рисунок 10. Общее количество записей в базе данных IndexedDB.

Соответствующие проблемы Chromium: #941197 , #930773 , #930865

Настройка отключения подробной подсказки при осмотре

В Chrome 73 появились подробные подсказки в режиме проверки .

Рисунок 11. Подробная подсказка, показывающая цвет, шрифт, поля и контрастность.

Теперь вы можете отключить эти подробные подсказки в меню «Настройки» > «Предпочтения» > «Элементы» > «Показать подробную подсказку проверки» .

Рисунок 12. Минимальная подсказка, показывающая только ширину и высоту.

Соответствующая проблема Chromium: #948417

Настройка переключения отступа табуляции в редакторе панели «Источники»

Тестирование доступности показало, что в редакторе есть ловушка вкладок. После того, как пользователь клавиатуры входил в редактор , он не мог выйти из него, поскольку клавиша Tab использовалась для отступа. Чтобы переопределить поведение по умолчанию и использовать Tab для перемещения фокуса, включите Настройки > Настройки > Источники > Включить перемещение фокуса вкладками .

В последнее время было много работы по созданию пользовательского интерфейса DevTools, более удобного для навигации с помощью клавиатуры. Ознакомьтесь с Navigate Chrome DevTools With Assistive Technology Роба, чтобы узнать больше.

Загрузите каналы предварительного просмотра

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

Свяжитесь с командой Chrome DevTools

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .