他のエフェクトを適用する: 自動ダークモードの有効化、フォーカスのエミュレーションなど

Sofia Emelianova
Sofia Emelianova
GitHub

ページに適用できる便利な効果については、[レンダリング] タブのオプションのリファレンスをご覧ください。

広告フレームをハイライト表示

フレームが広告としてタグ付けされているかどうかを確認するには:

  1. このデモで[レンダリング] タブを開き、[広告フレームをハイライト表示] をオンにします。
  2. 広告フレームが赤色でハイライト表示されていることを確認します。

赤でハイライト表示された広告

フォーカスのあるページをエミュレート

ページから DevTools にフォーカスを切り替えると、一部のオーバーレイ要素は、フォーカスによってトリガーされると自動的に非表示になります。（プルダウン リスト、メニュー、日付選択ツールなど）。 [フォーカスされているページをエミュレート] オプションを使用すると、そのような要素がフォーカスされているかのようにデバッグできます。

フォーカスされているページをエミュレートするには:

  1. デバッグする要素（例: 検索バーのある YouTube ウェブサイト）を含むページを開きます。

  2. このページで、[レンダリング] タブを開き、[フォーカスされたページをエミュレートする] をオンにしてからオフにします。

    フォーカスされているページをエミュレートする

[要素] のアクションバーの :hov ボタンからも同じオプションが表示されます。スタイル。

要素を固定するその他の方法については、画面の固定と消える要素の調査をご覧ください。

ローカル フォントを無効にする

@font-face ルールで local() ソースを無効にして、ローカルの代替フォントが想定どおりに動作するかどうかを確認します。

デベロッパーやデザイナーは、開発時に同じフォントの 2 つの異なるコピーを使用することがよくあります。

  • デザインツール用のローカル フォント
  • コードのウェブフォント

ローカル フォントを無効にすると、次のようなことが容易になります。

  • ウェブフォント読み込みのパフォーマンスと最適化をデバッグして測定する
  • CSS @font-face ルールの正確性を検証する
  • ウェブフォントとローカル バージョンの違いを調べる
お使いのデバイスでこのフォントが検出された場合、Chrome はこの文を Courier New でレンダリングします。

@font-face ルールで不足している local() ソースをエミュレートします。

  1. 上記の文を調べて、[要素] を開く >[計算済み] で、下にスクロールし、[レンダリングされたフォント] で、ローカル ファイル内で Courier New が検出されたことを確認します。

    レンダリング フォント: ローカル

  2. [レンダリング] タブを開き、[ローカル フォントを無効にする] をオンにして、 ページを再読み込みします。

  3. ウェブで見つけた Roboto の文を確認します。

    レンダリング フォント: ネットワーク リソース

自動ダークモードを有効にする

ダークモードを実装しない場合も、ダークモードでサイトがどのように見えるかを確認できます。

Chrome 96 では、Android の自動ダークモードのオリジン トライアルが導入されました。この機能を使用すると、ユーザーがオペレーティング システムでダークモードを有効にしている場合、ブラウザはライトテーマのサイトに自動生成されたダークモードを適用します。

自動ダークモードを有効にするには:

  1. このページで、[レンダリング] タブを開き、[自動ダークモードを有効にする] をオンにします。
  2. このページをダークモードで確認します。

自動ダークモードを有効にしました

色覚異常をエミュレート

誰もが利用できるウェブの実現を目指して、Google は、その実現に全力で取り組んでいます。

Chrome DevTools を使用すると、視覚障がいのあるユーザーがサイトをどのように表示するかを確認できるため、視覚障がいのあるユーザーにとって使いやすいサイトにすることができます。詳しくは、色覚障害をシミュレートするをご覧ください。

色覚異常をエミュレートするには:

  1. [レンダリング] タブを開きます。

  2. [視覚障害をエミュレートする] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし。
    • 目のかすみ。
    • コントラストを下げる。
    • 1 型 2 色覚（赤色の識別不可）。赤色に対する認識が低い。混同です。
    • 2 型 2 色覚（緑色なし）。緑色に対する認識が低い。混同です。
    • 3 型 2 色覚（青色なし）:青色の認識が低い。緑色と青色が混同される。
    • 色覚異常（色なし）。色覚が部分的または完全に欠如している。

トリタノピア（青色なし）を選択しました。

AVIF と WebP の画像形式を無効にする

これらのエミュレーションにより、デベロッパーはブラウザを切り替えることなく、さまざまな画像読み込みシナリオを簡単にテストできます。

新しいブラウザには AVIF 形式と WebP 形式で画像を提供し、古いブラウザには代替 PNG 画像を提供する次の HTML コードを使用しているとします。

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

ページ上のすべての AVIF 画像（または WebP 画像）を無効にするには:

  1. [レンダリング] タブを開き、[AVIF 画像形式を無効にする] をオンにします。
  2. ページを再読み込みし、img src にカーソルを合わせます。現在の画像の src（currentSrc）がフォールバック WebP 画像になりました。

画像タイプをエミュレートする

同様に、WebP 画像を無効にすることもできます。