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

Кейс Баскс
Kayce Basques

Поддержка Moto G4 в режиме устройства

После включения панели инструментов устройства вы теперь можете имитировать размеры области просмотра Moto G4 из списка устройств .

Имитация области просмотра Moto G4

Нажмите «Показать рамку устройства» , чтобы отобразить оборудование Moto G4 вокруг области просмотра.

Демонстрация аппаратного обеспечения Moto G4

Связанные особенности:

  • Откройте меню команд и выполните команду Capture screenshot , чтобы сделать снимок экрана области просмотра, включающей оборудование Moto G4 (после включения параметра «Показать рамку устройства »).
  • Уменьшите нагрузку на сеть и ЦП , чтобы более точно имитировать условия просмотра веб-страниц мобильным пользователем.

Проблема с Chromium № 924693

Обновления, связанные с файлами cookie

Заблокированные файлы cookie на панели «Файлы cookie»

Панель «Файлы cookie» на панели приложений теперь окрашивает заблокированные файлы cookie в желтый фон.

Заблокированные файлы cookie на вкладке «Файлы cookie» панели «Приложение»

См. также раздел Отладка причины блокировки cookie-файла , чтобы узнать, как получить доступ к аналогичному пользовательскому интерфейсу из панели «Сеть».

Проблема с Chromium № 1030258

Приоритет файлов cookie на панели «Файлы cookie»

Таблицы «Файлы cookie» на панелях «Сеть» и «Приложение» теперь содержат столбец «Приоритет» .

Проблема с Chromium № 1026879

Изменить все значения cookie-файлов

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

Редактирование значения cookie

Копировать как Node.js fetch для включения данных cookie

Щелкните правой кнопкой мыши сетевой запрос и выберите Копировать > Копировать как Node.js fetch, чтобы получить выражение fetch , включающее данные cookie.

Копировать как Node.js fetch

Проблема с Chromium № 1029826

Более точные значки манифеста веб-приложений

Раньше панель «Манифест» на панели «Приложение» выполняла собственные запросы для отображения значков манифеста веб-приложения. Теперь в DevTools отображается тот же значок манифеста, что и в Chrome.

Значки на панели манифеста

Проблема с Chromium № 985402

Наведите указатель мыши на свойства content CSS, чтобы увидеть неэкранированные значения.

Наведите указатель мыши на значение свойства content , чтобы увидеть неэкранированную версию значения.

Например, в этой демонстрации при проверке псевдоэлемента p::after вы видите экранированную строку на панели «Стили»:

Ускользнувшая строка

При наведении указателя мыши на значение content вы увидите неэкранированное значение:

Неэкранированное значение

Более подробные ошибки исходной карты в консоли

Консоль теперь предоставляет более подробную информацию о причине сбоя загрузки или анализа исходной карты. Раньше она просто выдавала ошибку без объяснения причины.

Ошибка загрузки исходной карты в консоли

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

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

Вот GIF-изображение этой функции .

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

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

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

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

Что нового в DevTools

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