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

Джеселин Йин

Запись: Копировать как параметры для шагов, воспроизведение на странице, контекстное меню шага.

В панели «Запись» появились новые параметры копирования.

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

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

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

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

Проблемы Chromium: 1322313 , 1351649 , 1322313 , 1339767

Отображение фактических названий функций в записях исполнения.

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

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

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

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

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

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

Проблемы Chromium: 1364601 , 1364601

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

Переключаться между вкладками на панели «Источники» можно следующим образом: в macOS — сочетание клавиш Function + Command + стрелки вверх и вниз; в Windows и Linux — сочетание клавиш Control + Page вверх или вниз.

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

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

Проблемы Chromium: 1167965 , 1172535 , 1371585 , 1369503

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

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

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

Проблемы Chromium: 1267690 , 1246863 , 1371322 , 1311637

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

[Экспериментальная версия] Улучшен пользовательский интерфейс при управлении точками останова

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

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

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

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

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

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

Проблемы Chromium: 1346231 , 1324904

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

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

Ранее на панели «Источники» по умолчанию отображалось сжатое содержимое. Для форматирования содержимого приходилось вручную нажимать кнопку «Форматировать». Более того, отформатированное содержимое отображалось не в том же файле, а в другой вкладке ::formatted .

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

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

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

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

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

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

Что нового в инструментах разработчика

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