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

Kayce Basques

Новые функции DevTools в Chrome 65 включают:

• Локальные переопределения
• Новые инструменты доступности
• Вкладка « Изменения »
• Новые SEO и аудиты производительности
• Несколько записей на панели «Исполнение»
• Надежное пошаговое выполнение кода с рабочими процессами и асинхронным кодом

Продолжайте читать или смотрите видеоверсию этих примечаний к выпуску ниже.

Локальные переопределения

Локальные переопределения позволяют вносить изменения в DevTools и сохранять эти изменения при загрузке страницы. Раньше любые изменения, внесенные в DevTools, терялись при перезагрузке страницы. Локальные переопределения работают для большинства типов файлов, за несколькими исключениями. См. Ограничения .

Рисунок 1. Сохранение изменения CSS при загрузке страницы с помощью локальных переопределений

Как это работает:

• Вы указываете каталог, в котором DevTools должен сохранять изменения.
• Когда вы вносите изменения в DevTools, DevTools сохраняет копию измененного файла в вашем каталоге.
• При перезагрузке страницы DevTools обслуживает локальный измененный файл, а не сетевой ресурс.

Чтобы настроить локальные переопределения :

1. Откройте панель «Источники» .

2. Откройте вкладку «Переопределения» .

   

   Рисунок 2. Вкладка « Переопределения»

3. Нажмите «Настроить переопределения» .

4. Выберите каталог, в котором вы хотите сохранить изменения.

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

6. Внесите изменения.

Ограничения

• DevTools не сохраняет изменения, сделанные в дереве DOM панели Elements . Вместо этого редактируйте HTML на панели Sources .
• Если вы редактируете CSS на панели «Стили» , а источником этого CSS является файл HTML, DevTools не сохранит изменения. Вместо этого отредактируйте файл HTML на панели «Источники» .

Связанные особенности

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

Вкладка «Изменения»

Отслеживайте изменения, которые вы вносите локально в DevTools, с помощью новой вкладки «Изменения» .

Рисунок 3. Вкладка « Изменения »

Новые инструменты доступности

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

Панель доступности

Используйте панель «Специальные возможности» на панели «Элементы» , чтобы изучить свойства специальных возможностей выбранного в данный момент элемента.

Рисунок 4. Панель «Доступность» показывает атрибуты ARIA и вычисляемые свойства для элемента, который в данный момент выбран в дереве DOM на панели «Элементы» , а также его положение в дереве доступности.

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

Коэффициент контрастности в палитре цветов

Color Picker теперь показывает вам контрастность текстовых элементов. Увеличение контрастности текстовых элементов делает ваш сайт более доступным для пользователей с нарушениями зрения или нарушениями цветовосприятия. См. Цвет и контрастность, чтобы узнать больше о том, как контрастность влияет на доступность.

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

Рисунок 5. Проверка коэффициента контрастности выделенного элемента h1

На рисунке 5 две галочки рядом с 4,61 означают, что этот элемент соответствует улучшенному рекомендуемому коэффициенту контрастности (AAA) . Если бы у него была только одна галочка, это означало бы, что он соответствует минимальному рекомендуемому коэффициенту контрастности (AA) .

Нажмите «Показать больше». для расширения раздела Коэффициент контрастности . Белая линия в поле Цветовой спектр представляет границу между цветами, которые соответствуют рекомендуемому коэффициенту контрастности, и теми, которые не соответствуют. Например, поскольку серый цвет на рисунке 6 соответствует рекомендациям, это означает, что все цвета ниже белой линии также соответствуют рекомендациям.

Рисунок 6. Расширенный раздел «Контрастность»

Связанные особенности

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

Ознакомьтесь со статьей Запуск Lighthouse в Chrome DevTools или посмотрите A11ycast ниже, чтобы узнать, как использовать панель «Аудит» для проверки доступности.

Новые аудиты

Chrome 65 поставляется с совершенно новой категорией SEO-аудитов и множеством новых аудитов производительности.

Новые SEO-аудиты

Обеспечение прохождения вашими страницами всех проверок в новой категории SEO может помочь улучшить ваш рейтинг в поисковых системах.

Рисунок 7. Новая категория SEO -аудитов

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

Chrome 65 также поставляется с множеством новых проверок производительности:

• Время загрузки JavaScript велико
• Использует неэффективную политику кэширования для статических активов
• Избегает перенаправлений страниц
• Документ использует плагины
• Сократить CSS
• Минимизировать JavaScript

Perf имеет значение! После того, как Mynet увеличил скорость загрузки страниц в 4 раза, пользователи провели на сайте на 43% больше времени, просмотрели на 34% больше страниц, показатель отказов снизился на 24%, а доход увеличился на 25% за просмотр страницы статьи. Узнать больше .

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

Другие обновления

• Новые ручные проверки доступности
• Обновления аудита WebP, чтобы сделать его более инклюзивным для других форматов изображений следующего поколения
• Пересмотр оценки доступности
• Если аудит доступности неприменим к странице, этот аудит больше не учитывается в оценке доступности.
• Производительность теперь является главным разделом в отчетах

Надежное пошаговое выполнение кода с рабочими процессами и асинхронным кодом

Chrome 65 приносит обновления для Step Into кнопка при шаге в код, который передает сообщения между потоками, и асинхронный код. Если вы хотите предыдущее поведение шага, вы можете использовать новый Шаг вместо этого нажмите кнопку .

Переход к коду, который передает сообщения между потоками

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

Например, приложение на рисунке 8 передает сообщение между основным потоком и рабочим потоком. После перехода в вызов postMessage() в основном потоке DevTools останавливается в обработчике onmessage в рабочем потоке. Сам обработчик onmessage отправляет сообщение обратно в основной поток. Переход в этот вызов останавливает DevTools обратно в основной поток.

Рисунок 8. Переход к коду передачи сообщений в Chrome 65

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

Рисунок 9. Переход к коду передачи сообщений в Chrome 63

Переход к асинхронному коду

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

Например, на рисунке 10 после перехода в setTimeout() DevTools автоматически запускает весь код, предшествующий этой точке, а затем останавливается в функции, переданной в setTimeout() .

Рисунок 10. Переход к асинхронному коду в Chrome 65

При выполнении такого кода в Chrome 63 DevTools останавливался на коде по мере его выполнения в хронологическом порядке, как показано на рисунке 11 .

Рисунок 11. Переход к асинхронному коду в Chrome 63

Несколько записей на панели «Исполнение»

Панель «Производительность» теперь позволяет временно сохранять до 5 записей. Записи удаляются при закрытии окна DevTools. См. раздел Начало работы с анализом производительности выполнения , чтобы освоиться с панелью «Производительность» .

Рисунок 12. Выбор между несколькими записями на панели «Исполнение»

Бонус: автоматизируйте действия DevTools с помощью Puppeteer 1.0

Вышла версия 1.0 Puppeteer, инструмента автоматизации браузера, поддерживаемого командой Chrome DevTools. Вы можете использовать Puppeteer для автоматизации многих задач, которые ранее были доступны только через DevTools, например, захват скриншотов:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Он также имеет API для множества полезных задач автоматизации, таких как создание PDF-файлов:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Более подробную информацию см. в разделе «Краткий старт» .

Вы также можете использовать Puppeteer для отображения функций DevTools во время просмотра, не открывая DevTools явно. См. Использование функций DevTools без открытия DevTools для примера.

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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