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

Sofia Emelianova
Sofia Emelianova
GitHub

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

広告フレームを強調

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 上記の文を調べて、[Elements] を開く >[計算済み] で、下にスクロールし、[レンダリングされたフォント] で、ローカル ファイル内で 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 画像を無効にすることもできます。