Simulate mobile devices with device mode in chrome devtools

Содержание

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

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

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


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

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

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

    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, это изменение также сохраняется в вашем локальном репозитории.

Visualize layout shifts

Supposing you’re reading a news article on your favorite website. As you’re reading the page, you keep losing your place because the content is jumping around. This problem is called layout shifting. It usually happens when images and ads finish loading. The page hasn’t reserved any space for the images and ads, so the browser has to shift all the other content down to make room for them. The solution is to use .

DevTools can now help you detect layout shifting:

  1. Open the Command Menu.
  2. Start typing .
  3. Run the Show Rendering command.
  4. Enable the Layout Shift Regions checkbox. As you interact with a page, layout shifts are highlighted blue.

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

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

кода, передающего сообщения между потоками.

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

Например, приложение в Рисунок 8 передает сообщение между основным потоком и рабочим потоком. После вызов в основном потоке DevTools приостанавливается в обработчике в рабочем потоке. Обработчик сам сообщение обратно в основной поток. Вступая в * этот * вызов, паузы DevTools возвращаются в основной поток.

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

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

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

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

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

Вкладка Network

С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.

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

Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.

Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.

Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.

В левом нижнем углу — информация о количестве запросов, трафике и времени загрузки. Ещё мы можем выбрать скорость соединения и проверить, как сайт работает на мобильном где-нибудь за городом.

Feedback

How was this article? Great? Terrible? Let us know by answering the questions below.

Ping @ChromeDevTools on Twitter or open a GitHub issue on our docs repo if we missed any features, or if you have any other questions about this article.

Was this page helpful? Yes What was the best thing about this page? It helped me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had the information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had accurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was easy to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. No What was the worst thing about this page? It didn’t help me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was missing information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had inaccurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was hard to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

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

Network panel updates

Request Initiator Chains in the Initiator tab

You can now view the initiators and dependencies of a network request as a nested list. This can help you understand why a resource was requested, or what network activity a certain resource (such as a script) caused.

After logging network activity in the Network panel, click a resource and then go to the Initiator tab to view its Request Initiator Chain:

  • The inspected resource is bold. In the screenshot above, is the inspected resource.
  • The resources above the inspected resource are the initiators. In the screenshot above, is the initiator of . In other words, caused the network request for .
  • The resources below the inspected resource are the dependencies. In the screenshot above, is a dependency of . In other words, caused the network request for .

Chromium issue #842488

Highlight the selected network request in the Overview

After you click a network resource in order to inspect it, the Network panel now puts a blue border around that resource in the Overview. This can help you detect if the network request is happening earlier or later than expected.

Chromium issue #988253

URL and path columns in the Network panel

Use the new Path and URL columns in the Network panel to see the absolute path or full URL of each network resource.

Right-click the Waterfall table header and select Path or URL to show the new columns.


Chromium issue #993366

Updated User-Agent strings

DevTools supports setting a custom User-Agent string through the Network Conditions tab. The User-Agent string affects the HTTP header attached to network resources, and also the value of .

The predefined User-Agent strings have been updated to reflect modern browser versions.

To access Network Conditions, open the Command Menu and run the command.

Chromium issue #1029031

Discover DevTools features

Below is a list of everything that’s been covered in the What’s New In DevTools series.

Chrome 72

  • in the Performance panel
  • in the DOM Tree
  • to a DOM node
  • , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
  • Bonus tip: Use Device Mode to inspect media queries (video)

Chrome 71

  • to highlight a DOM node
  • Store DOM nodes as global variables
  • Initiator and priority information now in HAR imports and exports
  • Access the Command Menu from the Main Menu
  • Picture-in-Picture breakpoints
  • Bonus tip: Use to log a node’s fired events in the Console (video)

新しいアクセシビリティツール

新しいアクセシビリティペインを使用して、要素のアクセシビリティプロパティを検査し、カラーピッカーのテキスト要素のコントラスト比を調べて、低視力障害または色のあるユーザーがアクセシビリティにアクセスできるようにします — 欠陥の欠陥。

アクセシビリティペイン

Elements パネルの Accessibility ペインを使用して、現在選択されている要素のアクセシビリティプロパティを調べます。

下のラベリングのRob DodsonのA11ycastをチェックして、アクセシビリティペインを実際に見てください。

カラーピッカーでのコントラスト比

はテキスト要素のコントラスト比を表示します。テキスト要素のコントラスト比を増やすと、視覚障害や色覚障害のあるユーザーがサイトにアクセスしやすくなります。コントラスト比がアクセシビリティにどのように影響するかについては、 を参照してください。

テキスト要素の色のコントラストを改善すると、 すべてのユーザーがサイトをより使いやすくすることができます。言い換えれば、テキストが白い背景で灰色である場合、誰にでも読むことは難しいです。

Figure 5. Inspecting the contrast ratio of the highlighted element

**図5 では、 4.61 **の隣にある2つのチェックマークは、この要素が満たすことを意味します。チェックマークが1つしかない場合は、それがに会ったことを意味します。

もっと見るをクリックしてください! コントラスト比セクションを拡大するにはShow MoreをShow Moreます。 ** Color Spectrum **ボックスの白い線は、推奨されるコントラスト比を満たす色と、そうでない色との境界を表します。例えば、 **図6 **は推奨を満たしています。つまり、白線の下のすべての色も推奨値を満たしています。

関連機能

監査パネルには、自動アクセシビリティ監査機能があります。 ページ上のすべてのテキスト要素は十分なコントラスト比を持っています。

参照 、またはアクセス可能性をテストするために監査パネルを使用する方法については、下記のA11ycastを見ます。

Coverage tab updates

Per-function or per-block coverage modes

The Coverage tab has a new dropdown menu that lets you specify whether code coverage data should be collected per function or per block. Per block coverage is more detailed but also far more expensive to collect. DevTools uses per function coverage by default now.

Coverage must now be initiated by a page reload

Toggling code coverage without a page reload has been removed because the coverage data was unreliable. For example, a function can be reported as unused if its execution was a long time ago and V8’s garbage collector has cleaned it up.

Chromium issue #1004203

Fix site issues with the new Issues tab

The new Issues tab in the Drawer aims to help reduce the notification fatigue and clutter of the Console. Currently, the Console is the central place for website developers, libraries, frameworks, and Chrome itself to log messages, warnings, and errors. The Issues tab presents warnings from the browser in a structured, aggregated, and actionable way, links to affected resources within DevTools, and provides guidance on how to fix the issues. Over time, more and more of Chrome’s warnings will be surfaced in the Issues tab rather than the Console, which should help reduce the Console’s clutter.

Check out Find And Fix Problems With The Chrome DevTools Issues Tab to get started.

Chromium Bug: #1068116

Discover DevTools features

Below is a list of everything that’s been covered in the What’s New In DevTools series.

Chrome 72

  • in the Performance panel
  • in the DOM Tree
  • to a DOM node
  • , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
  • Bonus tip: Use Device Mode to inspect media queries (video)

Chrome 71

  • to highlight a DOM node
  • Store DOM nodes as global variables
  • Initiator and priority information now in HAR imports and exports
  • Access the Command Menu from the Main Menu
  • Picture-in-Picture breakpoints
  • Bonus tip: Use to log a node’s fired events in the Console (video)

devServer.transportMode

This option allows us either to choose the current transport mode for client/server individually or to provide custom client/server implementation. This allows to specify how browser or other client communicates with the .

The current default mode is . This mode uses SockJS-node as a server, and SockJS-client on the client.

mode will become the default mode in the next major version. This mode uses ws as a server, and native WebSockets on the client.

Use mode:

To create a custom client implementation, create a class that extends .

Using path to , a custom WebSocket client implementation, along with the compatible server:

To create a custom server implementation, create a class that extends .

Using path to , a custom WebSocket server implementation, along with the compatible client:

Using class exported by , a custom WebSocket server implementation, along with the compatible client:

Using custom, compatible WebSocket client and server implementations:

Styles pane updates

Support for the keyword

The Styles pane’s autocomplete UI now detects the CSS keyword, which reverts the cascaded value of a property to what the value would have been if no changes had been made to the element’s styling.

Chromium Bug: #1075437

Hover over a value in the Styles pane to see a preview of the image in a tooltip.


Chromium Bug: #1040019

Color Picker now uses space-separated functional color notation

specifies that color functions like should support space-separated arguments. For example, is equivalent to .

When you choose colors with the or alternate between color representations in the Styles pane by holding Shift and then clicking the color value, you’ll now see the space-separated argument syntax.

You’ll also see the syntax in the Computed pane and the Inspect Mode tooltip.

DevTools is using the new syntax because upcoming CSS features like do not support the deprecated comma-separated argument syntax.

The space-separated argument syntax has been supported in most browsers for a while. See

Chromium Bug: #1072952

1. With Redux

1.1 Basic store

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

In case ESLint is configured to not allow using the underscore dangle, wrap it like so:

+ /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */

1.2 Advanced store setup

  import { createStore, applyMiddleware, compose } from 'redux';

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

To specify extension’s options, use it like so:

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);

1.3 Use package from npm

To make things easier, there’s an npm package to install:

and to use like so:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

To specify :

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

In case you don’t include other enhancers and middlewares, just use :

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
));

1.4 Using in production

If you want to restrict it there, use :

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // options like actionSanitizer, stateSanitizer
));

or with middlewares and enhancers:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

If you’re already checking when creating the store, include for production environment.

If you don’t want to allow the extension in production, just use .

1.5 For React Native, hybrid, desktop and server side Redux apps

For React Native we can use , which already included the same API with Redux DevTools Extension.

For most platforms, include ‘s store enhancer, and from the extension’s context menu choose ‘Open Remote DevTools’ for remote monitoring.

Постановка задачи

  • из SASS (точнее SCSS) файлов формируется один CSS файл;
  • из различных JavaScript библиотек и пользовательского кода формируется один JavaScript файл;
  • HTML страницы собираются с помощью шаблонизатора, где содержимое шапки и футера можно разнести по отдельным файлам.

В собранном сайте не должны использоваться React, Vue.js.

При выборе технологий выбираются по возможности наиболее популярные на данный момент. По этой причине отказался и от Grunt и Gulp в пользу Webpack, хотя, если честно, синтаксис Gulp мне понравился больше своим однообразием.

Для примера будет сверстано несколько страничек на базе Bootstrap 4. Но это только для примера.

Предполагается, что Node.js установлен (в Windows просто скачивается установщик и устанавливается в стиле «далее, далее»), и вы умеете работать с командной строкой.

Update. Нужно получить набор готовых HTML страниц, которые можно залить на хостинг без дополнительных настроек (например, на GitHub Pages) или открыть локально на компьютере.

DevTools Extensions

Accessibility (A11y)

Chromelens — See how your web app will look to people with different types of vision and the path users will travel when tabbing through your page.

Workflow

  • VueJS Developer Tools — Inspect VueJS components and manipulate their data.
  • Insight — A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
  • BEM devtools — Inspect BEM entities expressed in framework.

Performance

  • sloth — Chrome extension allows to enable and save CPU and network throttling for selected tabs.
  • TracerBench — TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Feedback

Was this page helpful? Yes What was the best thing about this page? It helped me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had the information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had accurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was easy to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. No What was the worst thing about this page? It didn’t help me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was missing information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had inaccurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was hard to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

  • File definite bug reports and feature requests at Chromium Bugs.
  • Discuss possible features, changes, and bugs on the .
  • Get help on how to use DevTools on Stack Overflow.
  • Tweet us at @ChromeDevTools.
  • File bugs on this document in the Web Fundamentals repository.

Discover DevTools features

Below is a list of everything that’s been covered in the What’s New In DevTools series.

Chrome 72

  • in the Performance panel
  • in the DOM Tree
  • to a DOM node
  • , including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu
  • Bonus tip: Use Device Mode to inspect media queries (video)

Chrome 71

  • to highlight a DOM node
  • Store DOM nodes as global variables
  • Initiator and priority information now in HAR imports and exports
  • Access the Command Menu from the Main Menu
  • Picture-in-Picture breakpoints
  • Bonus tip: Use to log a node’s fired events in the Console (video)

Feedback

Was this page helpful? Yes What was the best thing about this page? It helped me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had the information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had accurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was easy to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. No What was the worst thing about this page? It didn’t help me complete my goal(s) Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was missing information I needed Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It had inaccurate information Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. It was hard to read Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue. Something else Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.

To discuss the new features and changes in this post, or anything else related to DevTools:

  • File definite bug reports and feature requests at Chromium Bugs.
  • Discuss possible features, changes, and bugs on the .
  • Get help on how to use DevTools on Stack Overflow.
  • Tweet us at @ChromeDevTools.
  • File bugs on this document in the Web Fundamentals repository.

devServer.proxy

Proxying some URLs can be useful when you have a separate API backend development server and you want to send API requests on the same domain.


The dev-server makes use of the powerful http-proxy-middleware package. Check out its for more advanced usages. Note that some of ‘s features do not require a key, e.g. its feature, but you will still need to include a key in your configuration here, otherwise won’t pass it along to ).

With a backend on , you can use this to enable proxying:

webpack.config.js

A request to will now proxy the request to .

If you don’t want to be passed along, we need to rewrite the path:

webpack.config.js

A backend server running on HTTPS with an invalid certificate will not be accepted by default. If you want to, modify your configuration like this:

webpack.config.js

Sometimes you don’t want to proxy everything. It is possible to bypass the proxy based on the return value of a function.

In the function you get access to the request, response, and proxy options.

  • Return or to continue processing the request with proxy.
  • Return to produce a 404 error for the request.
  • Return a path to serve from, instead of continuing to proxy the request.

E.g. for a browser request, you want to serve an HTML page, but for an API request you want to proxy it. You could do something like this:

webpack.config.js

If you want to proxy multiple, specific paths to the same target, you can use an array of one or more objects with a property:

webpack.config.js

Note that requests to root won’t be proxied by default. To enable root proxying, the option should be specified as a falsy value:

webpack.config.js

The origin of the host header is kept when proxying by default, you can set to to override this behaviour. It is useful in some cases like using .

webpack.config.js

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

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

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

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

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

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

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

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

Figure 5. Inspecting the contrast ratio of the highlighted element

В Рисунок 5, две галочки рядом с 4.61 означают, что этот элемент соответствует . Если бы у него была только одна галочка, это означало бы, что она встретила .

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

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

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

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


С этим читают