Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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

Powered by Google Translate

Новые функции, входящие в DevTools в Chrome 65, включают:

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

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

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

Persisting a CSS change across page loads with Local Overrides.
Figure 1. Persisting a CSS change across page loads with Local Overrides

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

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

Для настройки Локальные переадресации :

  1. Откройте панель Sources . 1. Откройте вкладку Переопределения .

    The Overrides tab
    Figure 2. The Overrides tab

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

Ограничение

  • DevTools не сохраняет изменения, внесенные в DOM Tree панели Elements . Измените HTML на панели Sources .
  • Если вы редактируете CSS на панели Styles , а источником этого CSS является HTML-файл, DevTools не сохранит это изменение. Отредактируйте HTML-файл на панели Sources .
  • Workspaces . DevTools автоматически отображает сетевые ресурсы в локальный репозиторий. Всякий раз, когда вы вносите изменения в DevTools, это изменение также сохраняется в вашем локальном репозитории.

«Изменения»

Отслеживайте изменения, которые вы делаете локально в DevTools с помощью новой вкладки Изменения .

The Changes tab
Figure 3. The Changes tab

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

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

возможностей

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

The Accessibility pane shows the ARIA attributes and computed
            properties for the element that's currently selected in the DOM Tree of
            the Elements panel, as well as its position in the accessibility tree.
Figure 4. The Accessibility pane shows the ARIA attributes and computed properties for the element that's currently selected in the DOM Tree on the Elements panel, as well as its position in the accessibility tree

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

Контрастность в {: #contrast } цветов

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

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

Inspecting the contrast ratio of the highlighted H1 element.
Figure 5. Inspecting the contrast ratio of the highlighted h1 element

В Рисунок 5 , две галочки рядом с 4.61 означают, что этот элемент соответствует enhanced recommended contrast ratio (AAA) . Если бы у него была только одна галочка, это означало бы, что она встретила minimum recommended contrast ratio (AA) .

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

The expanded Contrast Ratio section.
Figure 6. The expanded Contrast Ratio section

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

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

Новые проверки

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

Новые аудит SEO

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

The new SEO category of audits.
Figure 7. The new SEO category of audits

Новые аудиты эффективности

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 возвращаются в основной поток.

Stepping into message-passing code in Chrome 65.
Figure 8. Stepping into message-passing code in Chrome 65

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

Stepping into message-passing code in Chrome 63.
Figure 9. Stepping into message-passing code in Chrome 63

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

При вступлении в асинхронный код DevTools теперь предполагает, что вы хотите приостановить асинхронный код, который в конечном итоге будет работать.

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

Stepping into asynchronous code in Chrome 65.
Figure 10. Stepping into asynchronous code in Chrome 65

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

Stepping into asynchronous code in Chrome 63.
Figure 11. Stepping into asynchronous code in Chrome 63

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

Панель Performance теперь позволяет временно сохранить до 5 записей. Записи удаляются при закрытии окна DevTools. См. Get Started with Analyzing Runtime Performance чтобы получить Get Started with Analyzing Runtime Performance к панели Performance .

Selecting between multiple recordings in the Performance panel.
Figure 12. Selecting between multiple recordings in the Performance panel

: автоматизация действий 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.

rss_feed Subscribe to our RSS or Atom feed and get the latest updates in your favorite feed reader!