Что нового в 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» .

,

Кейс Баски

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

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

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

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

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

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

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

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

Соответствующий хромовый выпуск: #931145

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

Нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команды, а затем запустить команду Clear Data Site , чтобы очистить все данные, связанные со страницей, включая: работники обслуживания , localStorage , sessionStorage , IndexedDB , Web SQL , Файлы cookie , кэш и кэш приложений .

Команда Clear Site Data.

Рисунок 3 . Команда Clear Site Data .

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

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

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

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

Соответствующий хромовый выпуск: #942503

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

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

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

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

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

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

Соответствующий хромовый выпуск: #943770

Посмотреть несжатый

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

Парят над столбцом размера, чтобы просмотреть несжатый ресурс.

Рисунок 7 . Парят над столбцом размера, чтобы просмотреть несжатый ресурс.

Соответствующий хромовый выпуск: #805429

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

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

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

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

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

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

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

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

Соответствующий хромовый выпуск: #927961

IndexedDB и Cache Resources

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

Общие записи в базе данных IndexedDB.

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

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

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

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

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

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

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

Минимальная выдержка инструментов.

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

Соответствующий выпуск хрома: #948417

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

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

В последнее время было много работы, чтобы сделать интерфейс Devtools более клавишными. Проверьте Rob's Navigate Chrome Devtools с помощью вспомогательных технологий, чтобы узнать больше.

Скачать каналы предварительного просмотра

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

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

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

Что нового в Devtools

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