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

Кейси Баски

Новые функции и основные изменения, которые появятся в DevTools в Chrome 67, включают:

Видеоверсия примечаний к выпуску :

Откройте панель «Сеть» , затем нажмите Command + F (Mac) или Control + F (Windows, Linux, ChromeOS), чтобы открыть новую панель поиска в сети . DevTools ищет заголовки и тела всех сетевых запросов по предоставленному вами запросу.

Поиск текста «управление кэшем» с помощью новой панели сетевого поиска.

Рисунок 1 . Поиск cache-control с помощью новой панели сетевого поиска.

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

Запрос регулярного выражения на панели сетевого поиска.

Рисунок 2 . Запрос регулярного выражения на панели сетевого поиска.

Пользовательский интерфейс панели глобального поиска теперь соответствует пользовательскому интерфейсу новой панели сетевого поиска . Теперь он также красиво распечатывает результаты, чтобы облегчить сканирование.

Старый и новый интерфейс.

Рисунок 3 . Старый интерфейс слева и новый интерфейс справа.

Нажмите Command + Option + F (Mac) или Control + Shift + F (Windows, Linux, ChromeOS), чтобы открыть Глобальный поиск . Вы также можете открыть его через командное меню .

Предварительный просмотр значений переменных CSS на панели «Стили»

Когда значение свойства цвета CSS, такого как background-color или color , установлено в переменную CSS, DevTools теперь отображает предварительный просмотр этого цвета.

Пример значений цвета переменной CSS.

Рисунок 4 . В старом пользовательском интерфейсе слева нет предварительного просмотра цвета рядом с color: var(--main-color) , тогда как в новом пользовательском интерфейсе справа есть

Копировать как получить

Щелкните правой кнопкой мыши сетевой запрос, затем выберите «Копировать» > «Копировать как выборку», чтобы скопировать код, эквивалентный fetch() для этого запроса, в буфер обмена.

Копирование кода, эквивалентного fetch(), для запроса.

Рисунок 5 . Копирование эквивалентного кода fetch() для запроса

DevTools создает код, подобный следующему: 

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Обновления панели аудитов

Новые аудиты

На панели «Аудит» появилось 2 новых аудита, в том числе:

Новые возможности конфигурации

Теперь вы можете настроить панель «Аудит» для:

  • Сохраните область просмотра рабочего стола и настройки пользовательского агента. Другими словами, вы можете запретить панели «Аудит» имитировать мобильное устройство.
  • Отключите регулирование сети и процессора.
  • Сохраняйте хранилище, такое как LocalStorage и IndexedDB, во время аудита.

Новые параметры конфигурации аудита.

Рисунок 6 . Новые параметры конфигурации аудита

Просмотр следов

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

Кнопка «Просмотреть трассировку».

Рисунок 7 . Кнопка «Просмотреть трассировку»

Остановить бесконечные циклы

Если вы часто работаете с циклами for , do...while или рекурсией, вы, вероятно, по ошибке выполнили бесконечный цикл при разработке своего сайта. Чтобы остановить бесконечный цикл, вы можете:

  1. Откройте панель «Источники» .
  2. Нажмите Пауза Пауза . Кнопка изменится на Возобновить выполнение сценария. Резюме .
  3. Удержание возобновления выполнения сценарияРезюме затем выберите «Остановить текущий вызов JavaScript». Останавливаться .

В видео выше часы обновляются с помощью таймера setInterval() . Нажатие кнопки «Начать бесконечный цикл» запускает цикл do...while который никогда не останавливается. Интервал возобновляется, поскольку он не выполнялся при остановке текущего вызова JavaScript.Останавливаться был выбран.

Пользовательское время на вкладках «Производительность»

При просмотре записи производительности щелкните раздел «Время пользователя» , чтобы просмотреть показатели времени пользователя на вкладках «Сводка» , «Снизу вверх» , «Дерево вызовов» и «Журнал событий» .

Просмотр показателей пользовательского времени на вкладке «Снизу вверх».

Рисунок 8 . Просмотр показателей пользовательского времени на вкладке «Снизу вверх» . Синяя полоса слева от раздела «Время пользователя» указывает на то, что он выбран.

В общем, теперь вы можете выбрать любой из разделов ( Main Thread , User Timing , GPU , ScriptStreamer и т. д.) и просмотреть активность этого раздела на вкладках.

Выберите экземпляры виртуальных машин JavaScript на панели «Память».

На панели «Память» теперь четко перечислены все экземпляры виртуальных машин JavaScript, связанные со страницей, вместо того, чтобы скрывать их за раскрывающимся меню «Цель» , как раньше.

Скриншоты панели «Память» до и после.

Рисунок 9 . В старом пользовательском интерфейсе слева экземпляры виртуальных машин JavaScript скрыты за раскрывающимся меню «Цель» , тогда как в новом пользовательском интерфейсе справа они отображаются в таблице «Выбор экземпляра виртуальной машины JavaScript» .

Рядом с экземпляром developers.google.com есть 2 значения: 8.7 MB и 13.3 MB . Левое значение представляет память, выделенную благодаря JavaScript. Правое значение представляет всю память ОС, выделяемую для этого экземпляра виртуальной машины. Правое значение включает в себя левое значение. В диспетчере задач Chrome левое значение соответствует JavaScript Memory , а правое значение соответствует Memory Footprint .

Вкладка «Сеть» переименована во вкладку «Страница».

На панели «Источники» вкладка «Сеть» теперь называется вкладкой « Страница» .

Два окна DevTools рядом, демонстрирующие изменение имени.

Рисунок 10 . В старом пользовательском интерфейсе слева вкладка, показывающая ресурсы страницы, называется «Сеть» , тогда как в новом пользовательском интерфейсе справа она называется «Страница».

Обновления темной темы

Chrome 67 поставляется с рядом незначительных изменений в цветовой схеме темной темы. Например, значки точек останова и текущая строка выполнения теперь зеленые.

Снимок экрана с новым значком точки останова и цветовой схемой текущей строки выполнения.

Рисунок 11 . Снимок экрана с новым значком точки останова и цветовой схемой текущей строки выполнения.

Прозрачность сертификата на панели «Безопасность»

На панели «Безопасность» теперь отображается информация о прозрачности сертификата .

Информация о прозрачности сертификата на панели «Безопасность».

Рисунок 12 . Информация о прозрачности сертификации на панели «Безопасность»

Изоляция сайта на панели «Производительность»

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

Диаграммы пламени для каждого процесса в записи производительности.

Рисунок 13 . Диаграммы пламени для каждого процесса в записи производительности

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

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

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

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

Что нового в DevTools

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

,

Кейс Баски

Новые функции и основные изменения, поступающие в Devtools в Chrome 67, включают:

Видео Версия выпуска заметок :

Откройте сетевую панель, затем нажмите Command + F (Mac) или Control + F (Windows, Linux, ChromeOS), чтобы открыть новую панель поиска сети . Devtools ищет заголовки и органы всех сетевых запросов на предоставление запроса, которое вы предоставляете.

Поиск текста «Контроль кэша» с новой панелью поиска сети.

Рисунок 1 . Поиск текстового cache-control с новой панелью поиска сети

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

Регулярный запрос выражения на панели поиска сети.

Рисунок 2 . Регулярный запрос выражения на панели поиска сети.

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

Старый и новый пользовательский интерфейс.

Рисунок 3 . Старый пользовательский интерфейс слева и новый пользовательский интерфейс справа

Нажмите команду + опция + F (Mac) или Control + Shift + F (Windows, Linux, ChromeOS), чтобы открыть глобальный поиск . Вы также можете открыть его через меню команд .

Предварительный просмотр значения переменной CSS на панели Styles

Когда значение цветового свойства CSS, например, background-color или color , устанавливается на переменную CSS, DevTools теперь показывает предварительный просмотр этого цвета.

Пример значений цвета переменной CSS.

Рисунок 4 . В старом пользовательском интерфейсе слева нет цветового предварительного просмотра рядом с color: var(--main-color) , тогда как в новом пользовательском интерфейсе справа есть

Скопируйте как выборочное

Щелкните правой кнопкой мыши сетевой запрос, затем выберите «Скопировать » в качестве Fetch, чтобы скопировать код fetch() -Equivalent для этого запроса в ваш буфер обмена.

Копирование Fetch ()-эквивалентный код для запроса.

Рисунок 5 . Копирование кода fetch() -ceequivalent для запроса

Devtools производит код, как следующее: 

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Обновления панели аудитов

Новые аудиты

У панели аудитов есть 2 новых аудита, в том числе:

Новые параметры конфигурации

Теперь вы можете настроить панель аудитов на:

  • Сохранить настройки Viewport и настройки пользовательского агента. Другими словами, вы можете предотвратить моделирование панели аудитов мобильного устройства.
  • Отключить сеть и дросселирование процессора.
  • Сохранить хранилище, такое как LocalStorage и IndexedDB, через аудиты.

Новые параметры конфигурации аудита.

Рисунок 6 . Новые параметры конфигурации аудита

Посмотреть следы

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

Кнопка «Вид».

Рисунок 7 . Кнопка «Вид»

Остановите бесконечные петли

Если вы работаете с for , do...while петли или рекурсию много, вы, вероятно, выполнили бесконечный цикл по ошибке при разработке своего сайта. Чтобы остановить бесконечную петлю, теперь вы можете:

  1. Откройте панель источников .
  2. Нажмите на паузу Пауза . Кнопка изменяется, чтобы возобновить выполнение скрипта Резюме .
  3. Удерживайте выполнение сценария резюмеРезюме Затем выберите «Остановить текущий вызов JavaScript» Останавливаться .

В видео выше часы обновляются через таймер setInterval() . Нажатие Start Infinite Loop запускает do...while цикл, который никогда не останавливается. Интервал возобновляется, потому что он не работал, когда остановите текущий вызов JavaScriptОстанавливаться был выбран.

Время пользователя в вкладках производительности

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

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

Рисунок 8 . Просмотр мер по времени пользователей на вкладке «Восзащивание» . Синяя полоса слева от раздела пользовательского времени указывает, что она выбран.

В целом, теперь вы можете выбрать любой из разделов ( основной поток , время пользователя , GPU , ScriptStreamer и т. Д.) И просмотреть деятельность этого раздела на вкладках.

Выберите экземпляры javascript vm на панели памяти

Панель памяти теперь четко перечисляет все экземпляры javaScript VM, связанные со страницей, вместо того, чтобы скрывать их за выпадающим меню, как и раньше.

До и после скриншотов панели памяти.

Рисунок 9 . В старом пользовательском интерфейсе слева экземпляры JavaScript VM скрыты за целевым раскрывающимся меню, тогда как в новом пользовательском интерфейсе справа они показаны в таблице экземпляров VM Select Javascript

Рядом с экземпляром developers.google.com есть 2 значения: 8.7 MB и 13.3 MB . Левое значение представляет память, выделенную из -за JavaScript. Правильное значение представляет всю память ОС, которая выделяется из -за этого экземпляра VM. Правильное значение включает в себя левое значение. В диспетчере задач Chrome левое значение соответствует JavaScript Memory , а правильное значение соответствует Memory Footprint .

Вкладка сети переименована в вкладку страницы

На панели «Источники» вкладка «Сеть» теперь называется вкладка « Страница» .

Два devtools Windows бок о бок, демонстрируя изменение имени.

Рисунок 10 . В старом пользовательском интерфейсе слева вкладка, показывающая ресурсы страницы, называется сетью , тогда как в новом пользовательском интерфейсе справа она называется страницей

Темные обновления темы

Chrome 67 поставляется с рядом незначительных изменений в темной цветовой схеме темы. Например, значки точки останова и текущая линия выполнения теперь зеленые.

Экриншот новой значки точки останова и тока цветовой схемы выполнения.

Рисунок 11 . Скриншот новой значки точки остановки и тока -линии цветовой схемы выполнения

Прозрачность сертификата в панели безопасности

Панель безопасности теперь сообщает о прозрачности сертификата .

Информация о прозрачности сертификата в панели безопасности.

Рисунок 12 . Информация о прозрачности сертификации в панели безопасности

Изоляция сайта на панели производительности

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

Пламя Per-Process в записи производительности.

Рисунок 13 . Пламенные диаграммы для процесса в записи производительности

Скачать каналы предварительного просмотра

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

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

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

Что нового в Devtools

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