Что нового в 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 на панели «Элементы» , а также его положение в дереве доступности.

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

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

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

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

Рисунок 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 Кнопка при входе в код, который передает сообщения между потоками, и асинхронный код. Если вам нужно предыдущее поведение шага, вы можете использовать новый шаг вместо этого нажмите кнопку.

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

Когда вы входите в код, передающий сообщения между потоками, 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» .