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

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

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

Имитация видового экрана Moto G4

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

Показ аппаратного обеспечения Moto G4

Связанные функции:

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

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

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

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

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

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

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

Проблема с хромом № 1030258.

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

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

Проблема с хромом № 1026879.

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

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

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

Скопируйте как выборку Node.js, чтобы включить данные cookie

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

Копировать как выборку Node.js

Проблема с хромом № 1029826.

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

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

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

Проблема с хромом № 985402.

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

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

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

Экранированная строка

При наведении курсора на значение content вы увидите неэкранированное значение:

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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