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

Кейси Баск
Kayce Basques
X GitHub

Здравствуйте! Вот что нового в инструментах разработчика Chrome в версии 75.

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

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

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

Старая модель автозаполнения.

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

Новое поведение автозаполнения.

Рисунок 2. Новое поведение автозаполнения. Инструменты разработчика автоматически дополняют текст на 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> использовал IndexedDB, вы не могли увидеть его базу данных (или базы данных). Начиная с Chrome 75, инструменты разработчика отображают базы данных IndexedDB для всех источников.

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

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

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

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

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

При наведении курсора мыши отображается несжатый размер ресурса.

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

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

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

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

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

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

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

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

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

Рисунок 8. Предыдущее поведение. В панели «Точки останова» отображается только 1 запись.

Новое поведение. В панели «Точки останова» отображается 3 записи.

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

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

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

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

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

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

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

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

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

Подробная всплывающая подсказка.

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

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

Минималистичная всплывающая подсказка.

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

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

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

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

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

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

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

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

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

Что нового в инструментах разработчика

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