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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

広告が赤色でハイライト表示されている

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

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

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

  1. デバッグする要素を含むページを開きます。たとえば、検索バーのある YouTube ウェブサイトを開きます。

  2. ページで [レンダリング] タブを開き、[フォーカスされているページをエミュレートする] チェックボックスをオンまたはオフにします。

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

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

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

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

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

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

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

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

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

  1. 上記の文を検査し、[要素] > [計算] を開いて一番下までスクロールし、[レンダリングされたフォント] で、Chrome がローカル ファイルで Courier New を見つけたことを確認します。

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

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

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

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

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

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

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

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

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

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

視覚障がいをエミュレートする

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

Chrome DevTools で、視覚障がいを持つユーザーがサイトをどのように見ているかを把握し、改善に役立てることができます。詳しくは、色覚障害をシミュレートするをご覧ください。

視覚障がいをエミュレートするには:

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

  2. [Emulate Vision deficiencies] で、プルダウン リストから次のいずれかを選択します。

    • エミュレーションなし。
    • 目のかすみ。
    • コントラストを下げる。
    • 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 画像を無効にすることもできます。