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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом: 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 при управлении контрольными точками

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

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

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

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

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

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

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

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

Панель Sources теперь автоматически печатает минимизированные исходные файлы на месте. Вы можете нажать кнопку pretty print { } , чтобы отменить это.

Раньше панель Sources по умолчанию отображала минифицированный контент. Чтобы отформатировать контент, приходилось вручную нажимать кнопку pretty print. Кроме того, красиво напечатанный контент отображался не в том же файле, а на другой вкладке ::formatted .

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

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

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

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

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

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

Что нового в DevTools

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