Что нового в 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-дерево панели «Элементы» . Вместо этого редактируйте HTML на панели «Источники» .
• Если вы редактируете CSS на панели «Стили» , а источником этого CSS является HTML-файл, DevTools не сохранит изменения. Вместо этого отредактируйте HTML-файл на панели «Источники» .

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

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

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

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

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

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

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

Панель специальных возможностей

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

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

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

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

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

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

Рисунок 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

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

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

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

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

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

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

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

При выполнении кода, который передает сообщения между потоками, 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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