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

Что нового в DevTools

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

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

Что нового в DevTools

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

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

Что нового в DevTools

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

   

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

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

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

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

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

Ограничения

• Devtools не сохраняет изменения, сделанные в дереве DOM на панели Elements . Редактировать HTML на панели источников вместо этого.
• Если вы редактируете CSS на панели Styles , а источник CSS - это HTML -файл, DevTools не сохранит изменение. Вместо этого отредактируйте HTML -файл на панели источников .

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

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

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

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

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

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

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

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

Используйте панель доступности на панели Elements , чтобы исследовать свойства доступности в настоящее время выбранного элемента.

Рисунок 4 . На панели доступности показаны атрибуты ARIA и вычисленные свойства для элемента, который в настоящее время выбран в дереве DOM на панели элементов , а также его положение в дереве доступности

Проверьте A11Cast Rob Dodson на маркировке ниже, чтобы увидеть панель доступности в действии.

Соотношение контрастности в цветовом сборке

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

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

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

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

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

Рисунок 6 . Раздел расширенного соотношения контрастности

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

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

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

Новые аудиты

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

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

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

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

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

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

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

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

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

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

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

Надежный код шаг с работниками и асинхронным кодом

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

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

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

Несколько записей на панели Performance

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

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

Бонус: автоматизируйте действия DevTools с кукловодом 1.0

Версия 1.0 Puppeteer, инструмент автоматизации браузера, поддерживаемый командой Chrome Devtools, теперь вышла. Вы можете использовать кукловолок для автоматизации многих задач, которые ранее были доступны только через 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();
})();

Смотрите быстрое начало , чтобы узнать больше.

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

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

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

Связь с командой Chrome DevTools

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

• Отправьте нам предложение или отзыв через crbug.com .
• Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .

Что нового в DevTools

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