Новые функции, входящие в DevTools в Chrome 65, включают:
- Local Overrides
- New accessibility tools
- The Changes tab
- New SEO and performance audits
- Multiple recordings in the Performance panel
- Reliable code stepping with workers and asynchronous code
Читайте дальше или смотрите видео-версию этих примечаний к выпуску ниже.
Локальная переопределяет
Локальные перестановки позволяют вносить изменения в DevTools и сохранять эти изменения при загрузке страниц. Раньше любые изменения, которые вы делали в DevTools, терялись при перезагрузке страницы. Локальные переопределения работают для большинства типов файлов с несколькими исключениями. См. Раздел Limitations .
Как это устроено:
- Вы указываете каталог, в котором DevTools должен сохранять изменения.
- Когда вы вносите изменения в DevTools, DevTools сохраняет копию измененного файла в ваш каталог.
- Когда вы перезагружаете страницу, DevTools обслуживает локальный, измененный файл, а не сетевой ресурс.
Для настройки Локальные переадресации:
Откройте панель Sources. 1. Откройте вкладку Переопределения.
Figure 2. The Overrides tab Щелкните Настройка переопределения. 1. Выберите каталог, в который вы хотите сохранить изменения. 1. В верхней части окна просмотра щелкните Разрешить, чтобы дать DevTools доступ для чтения и записи в каталог. 1. Внесите свои изменения.
Ограничение
- DevTools не сохраняет изменения, внесенные в DOM Tree панели Elements. Измените HTML на панели Sources.
- Если вы редактируете CSS на панели Styles, а источником этого CSS является HTML-файл, DevTools не сохранит это изменение. Отредактируйте HTML-файл на панели Sources.
Связанные функции
- Workspaces . DevTools автоматически отображает сетевые ресурсы в локальный репозиторий. Всякий раз, когда вы вносите изменения в DevTools, это изменение также сохраняется в вашем локальном репозитории.
«Изменения»
Отслеживайте изменения, которые вы делаете локально в DevTools с помощью новой вкладки Изменения.
Новые инструменты доступности
Используйте новую панель Доступность, чтобы проверить свойства доступности элемента, и проверьте коэффициент контрастности текстовых элементов в Color Picker, чтобы убедиться, что они доступны для пользователей с нарушениями зрения или цветом недостатки.
возможностей
Используйте панель Доступность на панели Элементы, чтобы исследовать свойства доступности выбранного в данный момент элемента.
Посмотрите на A11ycast от Rob Dodson по маркировке ниже, чтобы увидеть панель ** Доступность ** в действии.
Контрастность в {: #contrast } цветов
В Color Picker теперь отображается коэффициент контрастности текстовых элементов. Увеличение коэффициента контрастности текстовых элементов делает ваш сайт более доступным для пользователей с нарушениями зрения и недостатками цветового зрения. См. Color and contrast чтобы узнать больше о том, как коэффициент контрастности влияет на доступность.
Улучшение цветового контраста ваших текстовых элементов делает ваш сайт более удобным для всех пользователей. Другими словами, если ваш текст серый с белым фоном, это трудно для кого-то читать.
h1 element
В Рисунок 5, две галочки рядом с 4.61 означают, что этот элемент соответствует enhanced recommended contrast ratio (AAA) . Если бы у него была только одна галочка, это означало бы, что она встретила minimum recommended contrast ratio (AA) .
Нажмите Показать больше! Show More чтобы расширить раздел Контрастность. Белая линия в поле Цветной спектр обозначает границу между цветами, которые соответствуют рекомендуемому коэффициенту контрастности, и тем, которые этого не делают. Например, поскольку серый цвет в Рисунок 6 соответствует рекомендациям, это означает, что все цвета под белой линией также соответствуют рекомендациям.
Связанные функции
Панель Audits имеет автоматизированный аудит доступности для обеспечения того, чтобы каждый текстовый элемент на странице имеет достаточный коэффициент контрастности.
См. Run Lighthouse in Chrome DevTools или смотрите A11ycast ниже, чтобы узнать, как использовать панель Audits для проверки доступности.
Новые проверки
Chrome 65 поставляется с совершенно новой категорией аудита SEO и многими новыми аудитами эффективности.
Новые аудит SEO
Обеспечение того, чтобы ваши страницы проходили каждый аудит в новой категории SEO, может помочь улучшить рейтинг вашей поисковой системы.
Новые аудиты эффективности
Chrome 65 также обладает множеством новых аудитов эффективности:
- Время загрузки JavaScript высок
- Использует неэффективную политику кэша для статических активов
- Избегает перенаправления страниц
- Документ использует плагины
- Минимизировать CSS
- Минимизировать JavaScript
Другие обновления
- New, manual accessibility audits
- Updates to the WebP audit чтобы сделать его более содержательным для других форматов изображений следующего поколения
- A rehaul of the accessibility score
- Если аудит доступности недоступен для страницы, этот аудит больше не учитывает оценку доступности
- Производительность теперь является верхней частью отчетов
Надежный кодовый шаг с рабочими и асинхронный код
Chrome 65 добавляет обновления в Step Into! Кнопка Step Into при Step Into в код, который передает сообщения между потоками и асинхронный код. Если вы хотите предыдущее поведение при шаге, вы можете использовать новый Шаг! Step кнопки Step .
кода, передающего сообщения между потоками.
Когда вы входите в код, который передает сообщения между потоками, DevTools теперь показывает вам, что происходит в каждом потоке.
Например, приложение в Рисунок 8 передает сообщение между основным потоком и рабочим потоком. После postMessage() вызов postMessage() в основном потоке DevTools приостанавливается в обработчике onmessage в рабочем потоке. Обработчик onmessage сам onmessage сообщение обратно в основной поток. Вступая в * этот * вызов, паузы DevTools возвращаются в основной поток.
Когда вы вступили в такой код в более ранних версиях Chrome, Chrome показал вам основную часть кода, как вы можете видеть в Рисунок 9.
в асинхронный код
При вступлении в асинхронный код DevTools теперь предполагает, что вы хотите приостановить асинхронный код, который в конечном итоге будет работать.
Например, в Рисунок 10 после setTimeout() в setTimeout() , DevTools запускает весь код, ведущий к этой точке за кулисами, а затем делает паузу в функции, переданной в setTimeout() .
Когда вы вступили в такой код в Chrome 63, DevTools приостановился в коде, поскольку он хронологически работал, как вы можете видеть в Рисунок 11.
Несколько записей в панели Performance
Панель Performance теперь позволяет временно сохранить до 5 записей. Записи удаляются при закрытии окна DevTools. См. Get Started with Analyzing Runtime Performance чтобы получить Get Started with Analyzing Runtime Performance к панели Performance.
: автоматизация действий 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();
})();
См. Quick Start чтобы узнать больше.
Вы также можете использовать Puppeteer для раскрытия функций DevTools во время просмотра без явного открытия DevTools. См. Using DevTools Features Without Opening DevTools .
Запрос от команды DevTools: рассмотрите Canary
Если вы находитесь на Mac или Windows, рассмотрите возможность использования Chrome Canary качестве браузера по умолчанию. Если вы сообщаете об ошибке или изменениях, которые вам не нравятся, пока они все еще находятся в Канарее, команда DevTools может быстрее реагировать на ваши отзывы.
Обратная связь
Лучшее место для обсуждения любых функций или изменений, которые вы видите здесь, - это google-chrome-developer-tools@googlegroups.com mailing list . Вы также можете чирикать нас на @ChromeDevTools если у вас короткое время. Если вы уверены, что столкнулись с ошибкой в DevTools, пожалуйста, используйте open an issue .
Предыдущие заметки о выпуске
См. Тег devtools-whatsnew для ссылок на все предыдущие заметки о выпуске DevTools.
Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!