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

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. 上の文を確認して [要素] > [計算済み] を開き、一番下までスクロールすると、[レンダリングされたフォント] で、ローカル ファイル内で「Courier New」が検出されたことがわかります。

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

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

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

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

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

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

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

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

  1. このページで [レンダリング] タブを開き、[自動ダークモードを有効にする] チェックボックスをオンにします。
  2. このページをダークモードで表示してください。

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

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

誰もがウェブにアクセスして楽しめるようにする必要があります。Google はそれを実現することに全力を注いでいます。

Chrome DevTools を使用すると、目の不自由なユーザーにサイトがどのように見えているかを確認し、より良いサイト作りに役立てることができます。詳しくは、色覚異常をシミュレートするをご覧ください。

視力障害をエミュレートするには:

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

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

    • エミュレーションなし。
    • 目のかすみ。
    • 低コントラスト。
    • 1 型 2 色覚（赤色の識別不可）。赤が見えにくい、緑、赤、黄色が混同。
    • 2 型 2 色覚（緑色の識別不可）。緑が見えにくい。緑、赤、黄色が混同。
    • 3 型 2 色覚（青色の識別不可）。青があまり認識されない、緑と青が混同。
    • 色覚異常（色覚異常）。色覚が部分的または完全に欠損している状態です。

選択した 3 型 2 色覚（青色の識別不可）。

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

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

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

<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 画像を無効にできます。