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

Джеселин Йен

Регистратор: копирование в качестве параметров шагов, воспроизведение на странице, контекстное меню шагов

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

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

С последними обновлениями Recorder отображает этап навигации отдельно. Щёлкните правой кнопкой мыши и удалите его, чтобы воспроизвести запись на странице!

Кроме того, вы можете щёлкнуть правой кнопкой мыши по шагу и скопировать его в буфер обмена на панели «* Recorder» вместо того, чтобы экспортировать весь пользовательский поток. Это работает и с расширениями . Например, попробуйте скопировать шаг как тестовый скрипт 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 . Например, можно ввести в Console window. и использовать эти сочетания клавиш для навигации.

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

Проблемы с хромом: 1167965 , 1172535 , 1371585 . 1369503

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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