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

Кейси Баски

Привет! Вот что нового в 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. , файлы cookie , кеш и кеш приложений .

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

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

Очистка данных сайта уже некоторое время доступна в меню «Приложение» > «Очистить хранилище» . Новой функцией Chrome 75 является возможность запуска команды из командного меню.

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

Вкладка «Приложение» с выбранным параметром «Очистить хранилище».

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

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

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

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

Старое поведение. На страницу встроена демо-версия, использующая IndexedDB, но базы данных не видны.

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

Новое поведение. Базы данных демо-версии видны.

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

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

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

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

Наведите указатель мыши на столбец «Размер», чтобы просмотреть несжатый размер ресурса.

Рисунок 7 . Наведите указатель мыши на столбец «Размер», чтобы просмотреть несжатый размер ресурса.

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

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

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

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

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

Старое поведение. На панели «Точки останова» есть только одна запись.

Рисунок 8 . Старое поведение. На панели «Точки останова» есть только одна запись.

Новое поведение. На панели «Точки останова» есть 3 записи.

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

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

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

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

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

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

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

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

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

Подробная подсказка.

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

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

Минимальная подсказка.

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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