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

1. местный заменяет
2. ограничения
3. Новые инструменты доступности
4. Панель доступности
5. Коэффициент контрастности в палитре цветов
6. Связанные функции
7. Новые ревизии
8. Новые SEO аудиты
9. Другие обновления
10. в коде, который передает сообщения между потоками
11. асинхронный код
12. Несколько записей на панели «Производительность»
13. Запрос от команды DevTools: рассмотрим Canary
14. Предыдущие заметки о выпуске

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

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

местный заменяет

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

Рисунок 1

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

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

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

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

1. Откройте панель « Источники» . 1. Откройте вкладку « Замены ».

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

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

ограничения

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

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

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

Вкладка «Модификации»

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

Рисунок 3

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

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

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

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

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

Рисунок 4

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

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

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

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

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

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

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

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

Рисунок 6

Расширенный раздел Contrast Ratio

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

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

вид Run Lighthouse в Chrome DevTools или посмотрите A11ycast ниже, чтобы узнать, как использовать панель Audits для проверки доступности.

Новые ревизии

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

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

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

Рисунок 7

Новая SEO категория аудитов

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

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

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

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

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

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

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

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

Шаг в коде передачи сообщений в Chrome 65

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

Шаг в коде передачи сообщений в Chrome 63

асинхронный код

Когда вы вводите асинхронный код, DevTools теперь предполагает, что вы хотите приостановить работающий асинхронный код.

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

Шаг в асинхронный код в Chrome 65

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

Шаг в асинхронный код в Chrome 63

Несколько записей на панели «Производительность»

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

Рисунок 12

Выбор между несколькими записями на панели Performance

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

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

const puppeteer = require ('кукловод)'; (async () => {const browser = await puppeteer.launch (); const page = await browser.newPage (); await page.goto ('https://example.com'); await page.screenshot ({путь : 'example.png'}); await browser.close ();}) ();

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

const puppeteer = require ('кукловод)'; (async () => {const browser = await puppeteer.launch (); const page = await browser.newPage (); wait page.goto ('https://news.ycombinator.com', {waitUntil: 'networkidle2' }); ожидайте page.pdf ({путь: 'hn.pdf', формат: 'A4'}); ожидайте browser.close ();}) ();

вид Быстрый старт чтобы узнать больше.

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

Запрос от команды DevTools: рассмотрим Canary

Если вы используете компьютер Mac или Windows, рассмотрите возможность использования Chrome Canary в качестве браузера по умолчанию для разработки. Если вы сообщаете об ошибке или изменениях, которые вам не нравятся, пока они находятся на Канарских островах, команда DevTools может обработать ваши комментарии намного быстрее.

Лучшее место для обсуждения функций или модификаций, которые вы здесь видите, это Список рассылки [email protected] , Вы также можете нас @ChromeDevTools если вы пропустите время. Если вы уверены, что столкнулись с ошибкой в ​​DevTools, пожалуйста, открыть вопрос ,

Предыдущие заметки о выпуске

Смотрите тег DevTools-WhatsNew ссылки на все предыдущие заметки о выпуске DevTools.

Похожие

Комментарии