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

Kayce Basques

В Chrome 65 в инструментах разработчика появятся новые функции, в том числе:

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

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

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

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

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

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

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

Для настройки локальных переопределений :

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

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

   

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

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

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

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

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

Ограничения

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

Связанные функции

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

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

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

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

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

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

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

Воспользуйтесь панелью «Доступность» на вкладке «Элементы» , чтобы изучить свойства доступности выбранного в данный момент элемента.

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

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

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

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

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

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

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

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

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

Связанные функции

В панели «Аудит» есть автоматизированная проверка доступности, которая гарантирует, что каждый текстовый элемент на странице имеет достаточный коэффициент контрастности.

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

Новые аудиты

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

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

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

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

Новые аудиты эффективности

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рисунок 10. Пошаговое выполнение асинхронного кода в Chrome 65.

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

Рисунок 11. Пошаговое выполнение асинхронного кода в Chrome 63.

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

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

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

Бонус: Автоматизация действий в инструментах разработчика с помощью 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 .
• Сообщить о проблеме в инструментах разработчика можно с помощью параметра more_vert. Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам на YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .

Что нового в инструментах разработчика

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