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

София Емельянова
Sofia Emelianova
GitHub

Улучшения элементов

Новый значок подсетки CSS

На панели «Элементы» появился новый значок subgrid subgrid . В настоящее время эта функция находится в экспериментальной версии в Chrome Canary.

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

Значок подсетки и наложение в области просмотра.

Список всех значков на панели «Элементы» см. в справочнике по значкам .

Проблема с хромом: 1442536 .

Специфика селектора во всплывающих подсказках

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

Подсказка с указанием веса селектора.

Проблема с хромом: 1204932 .

Значения пользовательских свойств CSS во всплывающих подсказках

В разделе «Элементы» > «Стили» наведите указатель мыши на имя пользовательского свойства CSS, чтобы увидеть его значение во всплывающей подсказке.

Подсказка со значением пользовательского свойства CSS.

Команда DevTools хотела бы выразить благодарность一丝 и Suyan за внедрение этого улучшения.

Проблема с хромом: 1380779 .

Улучшения источников

Подсветка синтаксиса CSS

На панели «Источники» отображаются следующие данные для предварительно обработанных файлов CSS , таких как SASS, SCSS и LESS:

Улучшена подсветка синтаксиса CSS и поддержка встроенных редакторов в источниках.

Проблемы с хромом: 1302261 , 1392085 .

Ярлык для установки условных точек останова

Теперь вы можете быстрее устанавливать условные точки останова с помощью ярлыка. Чтобы открыть диалоговое окно точки останова, удерживайте Command (MacOS) или Control (Windows/Linux) и щелкните номер строки в левом столбце Sources > Editor .

Номер строки в левом столбце и диалоговое окно точки останова.

Проблема с хромом: 1405767 .

Приложение > Устранение последствий отслеживания отказов

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

Проверьте эту функцию безопасности:

  1. Заблокируйте сторонние файлы cookie в Chrome . Перейдите к и включите Трехточечное меню. > Настройки > Безопасность. Конфиденциальность и безопасность > Файлы cookie и другие данные сайта > Радиокнопка проверена. Блокируйте сторонние файлы cookie .
  2. В chrome://flags установите для эксперимента « Снижение отслеживания отказов» значение «Включено с удалением» .
  3. Изучите эту демонстрационную страницу , откройте «Приложение» > «Фоновые службы» > «Устранение последствий отслеживания отказов» , щелкните ссылку на отказ на странице, подождите (10 секунд), пока Chrome запишет отказ, и нажмите «Принудительно запустить» , чтобы немедленно удалить состояние.

В разделе «Отслеживание отказов» указано удаление состояния.

Кроме того, вкладка «Проблемы» предупреждает вас о предстоящем удалении состояния.

Проблема с хромом: 1432303 .

Маяк 10.2.0

На панели «Маяк» теперь работает Lighthouse 10.2.0. В частности, проверка Largest Contentful Paint получает таблицу с фазовыми расчетами для моделирования и регулирования DevTools. См. также полный список изменений .

Таблица фаз LCP.

Чтобы узнать основы использования панели Lighthouse в DevTools, см. Lighthouse: оптимизация скорости веб-сайта .

Проблема с хромом: 772558 .

Игнорировать сценарии контента по умолчанию

Настройки. Настройки > Список игнорирования > Флажок. Скрипты контента, внедренные расширениями, теперь включены по умолчанию.

Если этот параметр включен:

  • Отладчик игнорирует такие сценарии и не останавливается на возникающих ими исключениях.
  • Панель «Источники» > «Стек вызовов» пропускает игнорируемые кадры. Чтобы отключить пропуск здесь, установите флажок Флажок. Показывать кадры из игнорируемого списка .
  • Консоль сворачивает игнорируемые кадры в трассировках стека. Нажмите «Показать еще N кадров» , чтобы развернуть, и «Показать меньше» , чтобы снова свернуть.

Сценарии контента, внедряемые расширениями, включенными по умолчанию. Найдите это, посетив «Настройки», затем «Список игнорировать».

Кроме того, флажки в списке игнорирования получили более четкий текст.

Проблемы с хромом: 1440958 , 1364501 .

Сеть > Красивая печать ответов по умолчанию

На панели «Сеть» > «Ответ» теперь по умолчанию печатаются уменьшенные тела ответов, аналогично панели «Источники» .

Включена красивая печать в окне «Ответ» на вкладке «Сеть».

Кроме того, файлы SVG получают подсветку синтаксиса.

Подсветка синтаксиса SVG.

Проблемы с хромом: 1382752 , 1385374 .

Разное

Вот некоторые примечательные исправления и улучшения в этом выпуске:

  • Настройки. Настройки > Устройства : Facebook для Android v407 на Pixel 6 добавлен в список строк агента.
  • Сеть : добавлен ярлык «Очистить журнал сети» ( 1444991 ):
    • MacOS: Команда + К.
    • Windows/Linux: Control + L
  • Удален раскрывающийся список «Рекордер» > «Запись N» > «Панель статистики производительности» ( 1414773 ).
  • Таблицы стилей, которые не удалось загрузить, теперь скрыты из дерева навигатора ( 1386059 ).
  • Производительность : исправлено некорректное отображение расширяемой дорожки взаимодействий ( 1432510 ).
  • Элементы : таблицы стилей, которые не удалось загрузить, теперь подчеркиваются волнистыми линиями ( 1440626 ).
  • Отладчик не запускается автоматически в WebAssembly, если для соответствующего языка нет плагина ( 1443342 ).
  • Ярлык, который перемещает курсор по одному слову, восстанавливается для файлов CSS в разделе «Источники» > «Редактор» ( 1241848 ):
    • MacOS: Alt + Стрелка
    • Windows/Linux: Ctrl + Стрелка

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

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

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

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

Что нового в DevTools

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

,

София Эмельянови
Sofia Emelianova
GitHub

Улучшения элементов

Новый значок CSS Subgred

Панель Elements получает новый subgrid Badge для Subgred . Эта функция в настоящее время экспериментальна в Chrome Canary.

Чтобы осмотреть и отлаживать вложенную сетку, которая является подсчетом, и, следовательно, унаследовать количество и размер треков от своего родителя, щелкните значок. Он переключает наложение, которое показывает столбцы, ряды и их числа поверх элемента в видовом доке.

Подместитель значок и наложение в просмотре.

Список всех значков на панели «Элементы» см. Справочник значков .

Выпуск хрома: 1442536 .

Специфика селектора в подсказках инструментов

В элементах > стили , наведите на имя селектора, чтобы увидеть вес его специфичности в подъеме.

Подразделение инструментов с весом специфичности селектора.

Выпуск хрома: 1204932 .

Значения пользовательских свойств CSS в подъеме инструментов

В элементах > стили , наведите на пользовательское название свойства CSS, чтобы увидеть его значение в подсказке.

Подсказка со значением пользовательского свойства CSS.

Команда Devtools хотела бы выразить благодарность一丝 и Suyan за то, что они принесли это улучшение.

Выпуск хрома: 1380779 .

Улучшения источников

Синтаксис CSS

Панель источников получает следующее для предварительно обработанных файлов CSS , таких как SASS, SCSS и меньше:

  • Синтаксис выделение.
  • Встроенные редакторы поддержка. Эти редакторы аналогичны тем, которые в стилях > стили , например, сборщик цветов и редактор .

Улучшение синтаксиса CSS, выделение и встроенные редакторы, поддерживают источники.

Проблемы с хромом: 1302261 , 1392085 .

Ярлык, чтобы установить условные точки останова

Теперь вы можете быстрее устанавливать условные точки останова с ярлыком. Чтобы открыть диалоговое окно точки останова, удерживать команду (macOS) или Control (Windows / Linux) и нажмите номер строки в левом столбце источников > редактора .

Номер строки в левом столбце и диалог точки останова.

Выпуск хрома: 1405767 .

Приложение> Смягчения отслеживания отслеживания

Эксперимент по смягчению отслеживания отслеживания в Chrome позволяет идентифицировать и удалять состояние сайтов, которые, по-видимому, выполняют перекрестное отслеживание, используя метод отслеживания отскок. Приложение > Pane Services Pane получает новую вкладку смягчения отслеживания отслеживания , которая позволяет вам вручную заставлять смягчения отслеживания и перечисляет сайты, состояния которых были удалены.

Проверьте эту функцию безопасности:

  1. Блок сторонних печенья в хром . Перемещаться и включить Меню с тремя точками. > Настройки > Безопасность. Конфиденциальность и безопасность > файлы cookie и другие данные сайта > Радиобаття проверяется. Блок сторонних печенья .
  2. В chrome://flags установите эксперимент по смягчению отслеживания отскок, чтобы включить с удалением .
  3. Осмотрите эту демо -страницу , Открыть приложение > Службы фоновых фона > отслеживание отслеживания , нажмите на ссылку отскок на странице, подождите (10 секунд), чтобы Chrome, чтобы записать отскок, и нажмите «Сила» , чтобы немедленно удалить состояние.

Смягчение отслеживания отслеживания перечисляет удаление государства.

Кроме того, вкладка «Проблемы» предупреждает вас о предстоящем удалении штата.

Выпуск хрома: 1432303 .

Маяк 10.2.0

Панель маяка теперь запускает Lighthouse 10.2.0. В частности, самая большая довольная проверка краски получает таблицу с фазовыми расчетами для моделируемого и дроссельного дросселя. Смотрите также полный список изменений .

Таблица фазы LCP.

Чтобы узнать основы использования панели маяка в Devtools, см. Lighthouse: оптимизируйте скорость веб -сайта .

Выпуск хрома: 772558 .

Игнорировать сценарии контента по умолчанию

Настройки. Настройки > Игнорировать список > Флажок. Сценарии контента, введенные расширениями, теперь включены по умолчанию.

С включенной настройкой:

  • Отладчик игнорирует такие сценарии и не останавливается на исключениях, брошенных ими.
  • Источники источников > панели стека вызовов игнорируются кадры. Чтобы выключить пропуск здесь, проверьте Флажок. Шоу игнорируемые кадры .
  • Консоль обрушивается игнорируемые рамки в трассах стека. Нажмите «Показать» больше кадров , чтобы расширить, и покажите меньше , чтобы снова рухнуть.

Контент -сценарии, введенные расширениями, включены по умолчанию. Найдите это, посетив настройки, затем игнорируйте список.

Кроме того, флажки в списке игнорирования получили более четкий текст.

Проблемы хрома: 1440958 , 1364501 .

Сеть> Ответ по умолчанию симпатичный отклик

Панель откликов Network > теперь по умолчанию в Network> Allized Pronts Prints Panel .

Вкладка «Включено» в «Окно Окно Окно сети».

Кроме того, файлы SVG получают выделение синтаксиса.

Синтаксис SVG.

Проблемы хрома: 1382752 , 1385374 .

Разные основные моменты

Это некоторые примечательные исправления и улучшения в этом выпуске:

  • Настройки. Настройки > Устройства : добавлены Facebook для Android V407 на Pixel 6 в список строк агента.
  • Сеть : добавил ярлык прозрачного сетевого журнала ( 1444991 ):
    • MacOS: команда + k
    • Windows/Linux: Control + L
  • Удал Рекордер > Запись n > Панель Performance Insights раскрывающейся панели ( 1414773 ).
  • Таблицы стилей, которые не смогли загрузить, теперь скрыты от дерева навигатора ( 1386059 ).
  • Производительность : Исправлено неверное отображение трека расширяемого взаимодействия ( 1432510 ).
  • Элементы : таблицы стилей, которые не смогли загрузить, теперь недостаточно подчеркиваются волнистыми линиями ( 1440626 ).
  • Отладчик не автоматически входит в Webassembly, когда нет плагина для соответствующего языка ( 1443342 ).
  • Сочетание, которое перемещает курсор одно слово в время, восстанавливается для файлов CSS в источниках > редактора ( 1241848 ):
    • MacOS: Alt + стрелка
    • Windows/Linux: Ctrl + стрелка

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

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

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

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

Что нового в Devtools

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