index.md

layout	title	authors	date	description	hero	alt	tags
layouts/blog-post.njk	Новинки DevTools (Chrome 110)	jecelynyeen	2023-02-13	Очистка вкладки Производительность при перезагрузке, просмотр и подсветка кода в пользовательском сценарии в Регистраторе и другое.	image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kb5RVelVxuIzFDViu9BH.png		new-in-devtools devtools chrome-110

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

{% Partial 'devtools/banner.md' %} {% YouTube id='CrSmjooOEiE' %}

Очистка вкладки Производительность при перезагрузке {: #perf }

Во вкладке Производительность (Performance) теперь очищаются как скриншоты так и трассировки при клике на кнопку Начать профилирование и обновить страницу (Start profiling and reload page).

Ранее на вкладке Производительность (Performance) отображался таймлайн со скриншотами предыдущих записей. Это затрудняло определение начала нового измерения. Вкладка теперь всегда сначала переходит на страницу about:blank, чтобы гарантировать, что запись начнётся с пустой отметки. Это совпадает со вкладкой Статистика производительности (Performance Insights), которая уже имела такое поведение.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JVXCt6hKIxMtf0tCLWwh.png", alt="Очистка вкладки Производительность при перезагрузке.", width="800", height="548" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/0a301d29d165f17a6eceb1adf91bff0c1c2e07eb #}

Задачи в трекере Chromium: 1101268, 1382044

Обновления Регистратора (Recorder) {: #recorder }

Просмотр и подсветка кода в пользовательском сценарии в Регистраторе {: #recorder-code }

Регистратор (Recorder) теперь предлагает опцию раздельного просмотра кода, что облегчает просмотр кода пользовательского сценария. Чтобы просмотреть код, нажмите кнопку Показать код (Show Code).

Регистратор (Recorder) подсвечивает соответствующий код при наведении курсора на отдельные шаги слева, что облегчает отслуживание пути. Вы можете поменять формат кода в выпадающем меню, что позволяет переключаться между форматами, как скрипты для Nightwatch Test.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ZxNNmun9Yfqs97JCAn7C.png", alt="Просмотр кода в Регистраторе.", width="800", height="542" %}

Задача в трекере Chromium: 1385489

Настройка типов селекторов записи {: #recorder-selector }

Вы можете создавать записи, в которых отслеживаются только нужные вам типы селекторов. С новой опцией настройки типов селекторов при создании новой записи вы можете выбрать или исключить селекторы типа XPath, что обеспечит запись только желаемых селекторов.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5t2TOY9VA2Uq08Dq2ZhM.png", alt="Новая опция настройки типов селекторов.", width="800", height="645" %}

Задача в трекере Chromium: 1384431

Редактирование пользовательского сценария во время записи {: #recorder-edit }

Регистратор (Recorder) теперь допускает редакторирование во время записи, предоставляя вам возможность вносить изменения в режиме реального времени. Вам больше не нужно завершать запись для внесения изменений.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/1a2S1lizzJ5acRMgjtwH.png", alt="Редактирование пользовательского сценария во время записи.", width="800", height="619" %}

Задача в трекере Chromium: 1381971

Автоматическое красивое форматирование внутри файла {: #pretty-print }

Во вкладке Источники (Sources) минифицированные файлы теперь автоматически форматируются. Вы можете нажать на кнопку автоформатирования { }, чтобы отменить это.

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

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/twp21SJIisjYpnCWRbWi.png", alt="Показан минифицированный файл до и после автоформатирования.", width="800", height="501" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/3ae70742a7fce9657d8fcd578a182635e619cad5 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/0b9c42efb6065c8a697eaf3acd656cb87e3d4f54 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/b6bddcbabb2d977b620758ac20785675053a4db9 #}

Задачи в трекере Chromium: 1383453, 1382752, 1382397

Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других {: #highlight }

Во вкладке Источники (Sources) улучшена подсветка синтаксиса для нескольких широко используемых форматов файлов, включая Vue, JSX, Dart, LESS, SCSS, SASS и инлайн CSS. Это позволяет легче читать код и распознавать структуру.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/92SB2J5N6ImqJlOY3tIB.png", alt="Подсветка синтаксиса для Vue.", width="800", height="550" %}

Кроме того, в DevTools улучшен встроенный предварительный просмотр для Vue, инлайн HTML и TSX. Наведите курсор на переменную, чтобы просмотреть её значение.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uLxVoWz3yyxYvOkgCq7t.png", alt="Встроенный предварительный просмотр для Vue.", width="800", height="700" %}

Кроме того, DevTools теперь показывает карту источников стилей во вкладке Источники (Sources). Например, при открытии файла SCSS вы можете получить доступ к соответствующему файлу CSS, щелкнув ссылку на карту источников.

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bK6TMGR8c6285bUlrIbx.png", alt="Ссылка на карту источников для SASS.", width="800", height="745" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/c9af6b86b85bf23f9ed07d68b2d58b45910426de #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/4f330a0d5cef6e74b5b73f258e55cc0960769bca #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/9ec6a8092e7b45fc403d571982d1b214181d9695 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/5a02aca17849514b1e2bc828f78aedece5161dfa #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/c0928e31ba0ed2e81456f0109d323dd09768cfe1 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/992cc762b6790a7bd1a0d5c12ed0169270ac7dd0 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/f2bc726458c3d6507be9a4b56845b789c7ce653e #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/b77b77646c6257ab80893f5d1b5d9607a969c0e5 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/6f1ab763383c7641644f7fd4f88c49465a70ed01 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/11bdafdbbd9bd153aea84b1fe03db4dff89d3aa9 #}

Задачи в трекере Chromium: 1385374, 1385632, 1385281, 1385269, 1383892, 1361862, 1383451, 1392106, 1149734

Эргономичное и единообразное автодополнения в Консоли (Console) {: #console }

DevTools улучшил работу автодополнения, внедрив следующие изменения:

• Tab всегда используется для автодополнения.

• Поведение Стрелка вправо и Enter варьируется в зависимости от контекста.

• Поведение автодополнения одинаковое во всех текстовых редакторах во вкладках Консоль (Console), Источники (Sources) и Элементы (Elements).

Например, вот что происходит когда вы начинаете печатать cons в Консоли (Console):

• Консоль (Console) показывает список предложений автодополнения, с тонкой пунктирной рамкой вокруг верхней опции, указывая на то, что навигация по списку ещё не началась. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/kSTUPmkQK3HzE7BElmAK.png", alt="Рамка из точек вокруг первой опции автодополнения.", width="800", height="580" %}

• При нажатии Enter выполняется напечатанная строка. Ранее нажатие на Enter приводило к подстановке первого предложения из списка автодополнения. Для автодополнения нажмите Tab или Стрелку вправо. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/7SZ8AM51vI7WEIovjUDX.png", alt="Выполнение строки по Enter.", width="800", height="549" %}

• Консоль (Console) подсвечивает выбранную опцию во время навигации по списку при помощи клавиш Стрелка вниз и Стрелка вверх. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/XxjZu5GrFnPEUZhoQN0i.png", alt="Подсветка при навигации по списку.", width="800", height="580" %}

• Чтобы подставить выбранную опцию автодополнения используйте клавиши Tab, Enter, или Стрелка вправо. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/YU89q0lRFsocpdXS6ZMO.png", alt="Автодополнение опцией, выбранной при навигации.", width="800", height="360" %}

• Когда при редактировании курсор находится в тексте, например, между буквами n и s, используйте Tab для автодополнения, Enter для выполенняи строки и Стрелка вправо чтобы переместить курсор вперёд. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4jiMQ2btaT4MX7Y3VqgH.png", alt="Редактирование внутри строки.", width="800", height="549" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/00103b19eec2ba086c608b79ff34b696fe07bb62 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/89f259ddb6c36f486108e0dc9ccb4d4125a04917 #}

Задачи в трекере Chromium: 1399436, 1276960

Другие важные моменты {: #misc }

Вот ещё несколько заслуживающих внимания исправлений в этом выпуске:

• Устранена регрессивная проблема, когда DevTools не останавливался на операторе debugger во встроенных скриптах. (1385374)

• Новая настройка в Консоли (Console), которая позволяет по умолчанию скрывать или разворачивать сообщения console.trace(). Опция доступна в Настройки (Settings) > Параметры (Preferences) > Разворачивать сообщения console.trace() по умолчанию (Expand console.trace() messages by default). (1139616)

• Панель Фрагменты (Snippets) во вкладке Источники (Sources) теперь поддерживает улучшенное автодополнение, по примеру Консоли (Console). (772949) {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/thkb1CYO0yYiGHll7Yp8.png", alt="Автодополнение в Фрагментах.", width="800", height="417" %}

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}