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

Джеселин Йен

Регистратор: копирование как параметры шагов, повтор на странице, контекстное меню шага.

Новые параметры копирования на панели «Рекордер».

Откройте существующий пользовательский поток в Recorder . Раньше, когда вы воспроизводили пользовательский поток, DevTools всегда запускал воспроизведение путем перехода на страницу или ее перезагрузки.

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

Кроме того, вы можете щелкнуть шаг правой кнопкой мыши и скопировать его в буфер обмена на панели * Recorder вместо экспорта всего пользовательского потока. Это работает и с расширениями . Например, попробуйте скопировать шаг как сценарий теста Nightwatch . Благодаря этой функции вы можете легко обновить любой существующий скрипт.

Раньше доступ к пошаговому меню можно было получить только с помощью трехточечной кнопки. Теперь вы можете щелкнуть правой кнопкой мыши в любом месте шага, чтобы получить доступ к меню.

Проблемы с хромом: 1322313 , 1351649 , 1322313 , 1339767.

Показывать настоящие названия функций в записях выступления

На панели «Производительность» теперь отображаются фактические имена функций и их источники в трассировке, если имеется карта источников.

Показывать до и после сравнения названий функций на панели «Производительность».

В этом примере исходный файл минимизируется во время производства. Например, в этой демонстрации функция sayHi минимизирована до n , а функция takeABreak — до o .

Показать файлы до и после минификации.

Раньше, когда вы записывали трассировку на панели «Производительность» , трассировка показывала только минимизированные имена функций. Это усложняло отладку.

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

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

Новые сочетания клавиш на панели «Консоль и источники».

Переключаться между вкладками на панели «Источники» можно с помощью: В MacOS: «Функция» + «Команда» + «Стрелка вверх и вниз». В Windows и Linux: «Control» + «Страница вверх» или «Вниз».

Более того, вы можете перемещаться по предложениям автозаполнения с помощью Ctrl + N и Ctrl + P в MacOS, аналогично Emacs . Например, вы можете ввести window. в Console и используйте эти ярлыки для навигации.

Кроме того, DevTools теперь принимает стрелку вправо для автозаполнения только в конце строки. Например, диалоговое окно автозаполнения отображается, когда вы редактируете что-то в середине кода. Когда вы нажимаете клавишу «Стрелка вправо» , скорее всего, вы хотите установить курсор на следующую позицию вместо автозаполнения. Это изменение UX лучше согласуется с вашим рабочим процессом разработки.

Выпуск хрома: 1167965 , 1172535 , 1371585 . 1369503

Улучшенная отладка JavaScript.

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

  • new.target — это метасвойство, позволяющее определить, была ли вызвана функция или конструктор с использованием нового оператора. Теперь вы можете зарегистрировать new.target в консоли, чтобы проверить его значение во время отладки. Раньше при вводе new.target возвращались ошибки. Показать до и после сравнения отладки оценки new.target.
  • Объект WeakRef позволяет хранить слабую ссылку на другой объект, не предотвращая сбор мусора для этого объекта. DevTools теперь отображает встроенный предварительный просмотр значения и оценивает слабую ссылку непосредственно в консоли во время отладки. Раньше для решения этой проблемы приходилось явно вызывать у них команду «deref». Показать до и после сравнения оценки WeakRef во время отладки.
  • Исправлен встроенный предварительный просмотр для затененной переменной. Раньше отображаемое значение было неправильным. Отображение встроенного предварительного просмотра до и после сравнения для затененной переменной.
  • Деобфусцируйте имена переменных в Generator и async функциях на панели «Область действия» на панели «Источники» .

Проблемы с хромом: 1267690 , 1246863 , 1371322 , 1311637.

Разное

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

  • Поддержка дополнительных подсказок для неактивных свойств CSS на панели «Стили» — встроенных свойств высоты и ширины, гибкости и сетки. ( 1373597 , 1178508 , 1178508 , 1178508 )
  • Исправлена ​​подсветка синтаксиса. Он не работал должным образом после недавнего обновления редактора кода в DevTools. ( 1290182 )
  • Правильно фиксируйте события изменения ввода после события размытия в рекордере . ( 1378488 )
  • Обновите сценарий воспроизведения Puppeteer при экспорте, чтобы улучшить возможности отладки в Recorder . ( 1351649 )
  • Поддержка записи и воспроизведения в рекордере для удаленной отладки. ( 1185727 )
  • Исправлен анализ имен специальных переменных CSS в var() . Раньше DevTools не поддерживал анализ переменных с экранированными символами, такими как var(--fo\ o) . , ( 1378992 )

[Экспериментальное] Улучшенный UX при управлении точками останова.

Текущая панель «Точки останова» не обеспечивает наглядной помощи при наблюдении за всеми точками останова. Кроме того, часто используемые действия спрятаны за контекстным меню.

Этот экспериментальный редизайн пользовательского интерфейса структурирует панель «Точки останова» и позволяет разработчикам получить быстрый доступ к часто используемым функциям, таким как редактирование и удаление точек останова.

Вот некоторые основные моменты:

  • Оба параметра паузы находятся на панели «Точки останова» . У них есть явные текстовые метки, которые делают параметры понятными.
  • Точки останова группируются по файлам, упорядоченным по номеру строки или столбца. Вы можете свернуть и развернуть их.**
  • Новые возможности для удаления и редактирования точки останова при наведении курсора на точку останова или имя файла на панели «Точка останова» .

Прочтите полные изменения в нашем RFC (закрыто) и оставьте свой отзыв здесь .

Показывать панель «Точки останова» до и после редизайна.

Проблемы с хромом: 1346231 , 1324904.

[Экспериментальное] Автоматическая красивая печать на месте

Панель «Источники» теперь автоматически распечатывает минимизированные исходные файлы на месте. Вы можете нажать красивую кнопку печати { } чтобы отменить это действие.

Раньше на панели «Источники» по умолчанию отображался минимизированный контент. Чтобы отформатировать содержимое, вам пришлось вручную нажать красивую кнопку печати. Вдобавок ко всему, красиво напечатанный контент отображался не в том же файле, а в другой вкладке ::formatted .

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

Проблема с хромом: 1164184

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

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

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

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

Что нового в DevTools

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