Что нового в 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. Команда «Очистить данные сайта» .

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

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

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

Актуальная проблема Chromium: #942503

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

Ранее в разделе «Приложение» > «IndexedDB» можно было просматривать базы данных IndexedDB только из основного источника. Например, если на странице есть элемент <iframe> , использующий <iframe> , вы не сможете увидеть его базу данных. Начиная с 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) . Если включить все три, фактически будут созданы три точки останова. Ранее панель «Точки останова» не позволяла управлять этими тремя точками останова по отдельности. Начиная с Chrome 75, каждая встроенная точка останова имеет свою собственную запись на панели «Точки останова» .

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

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

Актуальная проблема Chromium: #927961

Количество ресурсов IndexedDB и кэша

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

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

Актуальные проблемы Chromium: #941197 , #930773 , #930865

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

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

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

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

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

Актуальная проблема Chromium: #948417

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

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

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

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

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

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

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

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

Что нового в DevTools

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