Сегодня Chrome обновлен до последней версии 87. Это последнее обновление Chrome в этом году. Эта версия является самым большим улучшением производительности Chrome за многие годы, и инструменты разработчика также были значительно обновлены.
Некоторые пользователи считают, что проблемы с производительностью Chrome давно подвергались критике, однако после выхода нового Edge производительность внезапно улучшилась, очевидно, потому что Google находится под давлением резкого увеличения доли рынка Edge.
Кроме того, Chrome на Mac обновил значок, который должен соответствовать дизайну Big Sur.
оригинал:Developers.Google.com/Web/updates…
PS: последнее видео об обновлении Chrome — это комментарий японки, эта англоговорящая действительно пьяна...
1. Новый отладчик сетки CSS
DevTools теперь лучше поддерживает CSS Grids.
Когда элемент HTML на страницеdisplay: gridилиdisplay: inline-gridКогда вы видите метку сетки рядом с ним на панели «Элементы». Щелчком по маркеру можно переключить подсветку страницы. Дисплей, покрытый сеткой.
На новой подпанели «Макет» есть вкладка «Сетка», которая предоставляет некоторые параметры для просмотра сетки.
ПроверитьДокументацияЧтобы получить больше информации.
В соответствии с проблемой Chromium:1047356
2. Новая панель WebAuthn
Теперь можно выдавать себя за аутентификатор и использовать новыйВкладка WebAuthnотладкаAPI веб-аутентификации.
Выберите Дополнительные параметры > Дополнительные инструменты > WebAuthn, как показано, чтобы открыть панель WebAuthn.
Встроенная отладка WebAuthn не поддерживалась в Chrome, пока не появился тег WebAuthn. Разработчикам нужны физические аутентификаторы для тестирования своих веб-приложений.
С новым тегом WebAuthn веб-разработчики теперь могут олицетворять аутентификаторы, настраивать их функциональность и проверять их статус, не требуя никаких физических аутентификаторов. Это упрощает процесс отладки.
Посмотреть нашДокументацияУзнайте больше о функции WebAuthn.
В соответствии с проблемой Chromium:1034663
3. Панель инструментов разработчика теперь поддерживает вертикальное разделение экрана.
DevTools теперь поддерживает перемещение панелей инструментов DevTools вверх и вниз, таким образом, любые две панели инструментов можно одновременно просматривать на разделенном экране.
Например, если вы хотите видеть панели «Элементы» и «Источники», вы можете щелкнуть правой кнопкой мыши панель «Источники» и выбрать «Переместить вниз».
Точно так же нижнюю часть любой вкладки, чтобы переместиться наверх, щелкните правой кнопкой мыши вкладку и выберите Переместить наверх.
4. Обновление функции панели элементов
4.1 Просмотр боковой панели Computed на подпанели Styles
Теперь можно переключать боковую панель Computed на панели Styles.
По умолчанию боковая панель «Вычисления» на панели «Стили» свернута, и нажатие кнопки переключает ее в развернутое состояние.
В соответствии с проблемой Chromium:1073899
4.2 Групповые свойства CSS на панели «Вычисляемые»
Свойства CSS теперь можно сгруппировать по категориям на боковой панели «Вычисления».
Благодаря этой новой функции группировки стало проще находить и выборочно фокусироваться на группе связанных свойств CSS в Computed.
На панели «Элементы» выберите элемент и установите флажок «Группировать», чтобы сгруппировать/разгруппировать свойства CSS.
Для проблем с хромом:1096230, 1084673, 1106251
5. Маяк Обновление Маяк 6.4
Панель Lighthouse теперь обновлена до Lighthouse 6.4, проверьтеrelease notesСм. полный список новых функций.
Новое в Маяке 6.4:
- Предварительно загрузить шрифты: сообщает, все ли файлы шрифтов, использующие font-display: optional, предварительно загружены.
- Действительные исходные карты: сообщает, верны ли файлы исходных карт для стороннего JS на странице.
- Большая библиотека JavaScript (экспериментальная): Большая библиотека JS на страницах отчетов (например, moment.js)
В соответствии с проблемой Chromium:772558
6. Событие performance.mark() будет отмечено на таймингах на панели Performance.
Раздел «Время» записи панели «Производительность» теперь помеченPerformance.mark()мероприятие.
7. Добавлены условия фильтрации по типу ресурса и URL-адресу на панели «Сеть».
Теперь можно использоватьresource-typeа такжеurlКлючевые слова для фильтрации сетевых запросов.
Например, используйтеresource-type: imageСетевые запросы, запрашивающие изображения, можно отфильтровать.
нажмитебольше фильтров, вы можете увидеть больше похожих наresource-typeа такжеurlиспользование фильтра.
Для проблем с хромом:1121141, 1104188
8. Обновления, связанные с подпанелью Frames на панели Application.
8.1 Поддержка дисплеяCOEPа такжеCOOPПоле Сообщить кому
Отчеты для конечных точек теперь можно просматривать в разделе «Безопасность и изоляция» подпанели «Фреймы» панели «Приложение».COEP(Политика встраивания разных источников) иCOOP(Политика открытия кросс-происхождения).
Reporting ApiОпределен новый заголовок HTTP под названием Report-To, когда на веб-сайте есть нарушение.COEP(Политика встраивания разных источников) иCOOP(Cross-Origin Opener Policy), браузер отправит отчет на адрес, указанный в этом заголовке.
О том, как включитьCOEPа такжеCOOPЧтобы сделать ваш веб-сайт кросс-изолированным (кросс-изолированным), см.эта статья
В соответствии с проблемой Chromium:1051466
8.2 Режим отчета только для COEP и COOP
В Devtools добавлено отображение разметки только для отчетов COEP и COOP.
смотретьэто видео, узнайте, как предотвратить утечку информации и как включить COOP и COEP.
В соответствии с проблемой Chromium:1051466
9. Удалите кнопку «Настройка» в меню «Дополнительные инструменты».
Настройка в меню «Дополнительные инструменты» устарела. Откройте «Настройки» на главной панели.
В соответствии с проблемой Chromium:1121312
10. Экспериментальные возможности
Следующие функции должны быть включены в разделе «Настройки» > «Эксперименты».
10.1 Поддержка просмотра и исправления проблем с цветовым контрастом на панели обзора CSS.
На панели «Обзор CSS» отображается список цветов для низкоконтрастного текста на странице.
этоДемонстрационная страницаПоказывая отрицательный пример низкой цветовой контрастности, откройте панель «Обзор CSS», чтобы просмотреть список всех проблемных элементов.
Щелчок по элементу в списке открывает этот элемент на панели «Элементы», а DevTools предлагает автоматические рекомендации по цвету, помогающие устранить проблемы с низким цветовым контрастом для текста.
В соответствии с проблемой Chromium:1120316
10.2 DevTools теперь поддерживает настраиваемые сочетания клавиш.
Сочетания клавиш теперь можно настроить в DevTools.
Перейдите в «Настройки» > «Ярлыки», наведите указатель мыши на команду и нажмите кнопку «Изменить», чтобы настроить ярлыки.
Чтобы сбросить все ярлыки, щелкните Восстановить ярлыки по умолчанию, чтобы восстановить ярлыки по умолчанию.
В соответствии с проблемой Chromium:174309
Если вы нашли какие-либо ошибки, пожалуйста, оставьте сообщение, чтобы указать.Если эта статья помогла вам, не забудьте поставить лайк и поддержать ее (если вам не нравится избранное, это все хулиганство 🤣)~
Другие высоко оцененные статьи автора:
- Советы по улучшению счастья в JS
- Советы по использованию Vue
- Nginx от начала до практики, подробное объяснение на 10 000 слов!
- Полчаса, чтобы познакомиться с базовыми знаниями, необходимыми для начала работы с CentOS
- Непосредственная практика конфигурации Webpack с несколькими входами
- Основной принцип перехода к интерфейсной маршрутизации
PS: адрес моего блогаGithub - SHERlocked93/blog, приглашаю всех обратить внимание на мой публичный номер前端下午茶, вы можете добавить его, выполнив поиск напрямую, и продолжать продвигать интерфейс и связанные с ним высококачественные технические статьи по интерфейсу для всех. Давайте вместе добьемся прогресса и продолжим вместе ~
Кроме того, вы можете присоединиться к группе WeChat «Front-end Afternoon Tea Exchange Group», поиск WeChatqianyu443033099добавь меня в друзья, отмечайДобавить группу, я заберу тебя в группу~