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

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

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

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

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

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

Рисунок 1

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

Как это устроено:

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

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

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

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

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

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

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

Ограничения

• 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 () DevTools запускает весь код, ведущий к этой точке за кулисами, а затем приостанавливает работу функции, переданной в setTimeout ().

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

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

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

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

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

Рисунок 12

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

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

Выпущена версия 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 (); await 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

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

Хром 75

Chrome 74

Хром 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59

Похожие

Комментарии