DevTools の新機能（Chrome 79）

Kayce Basques
Kayce Basques
X GitHub

Cookie の新機能

Cookie がブロックされた理由をデバッグする

ネットワーク アクティビティを記録したら、ネットワーク リソースを選択し、更新された [Cookie] タブに移動して、そのリソースのリクエストまたはレスポンスの Cookie がブロックされた理由を確認します。Chrome 76 以降でブロックされる Cookie が増える理由については、SameSite を指定しない場合のデフォルトの動作の変更をご覧ください。

[Cookie] タブ。

[Cookie] タブ。

  • 黄色のリクエスト Cookie はワイヤー経由で送信されませんでした。これらはデフォルトで非表示になっています。[除外したリクエスト Cookie を表示] をクリックして表示します。
  • 黄色の レスポンス Cookie はネットワーク経由で送信されましたが、保存されませんでした。
  • [詳細] 情報 にカーソルを合わせると、Cookie がブロックされた理由を確認できます。
  • [リクエスト Cookie] テーブルと [レスポンス Cookie] テーブルのデータのほとんどは、リソースの HTTP ヘッダーから取得されます。[ドメイン]、[パス]、[有効期限/Max-Age] のデータは、Chrome DevTools Protocol から取得されます。

Chromium の問題 #856777、#993843

Cookie の値を表示する

[Cookie] ペインの行をクリックすると、その Cookie の値が表示されます。

Cookie の値の表示。

Cookie の値の表示。

Chromium の問題 #462370

さまざまな prefers-color-scheme と prefers-reduced-motion の設定をシミュレートする

prefers-color-scheme メディアクエリを使用すると、サイトのスタイルをユーザーの設定に合わせることができます。たとえば、prefers-color-scheme: dark メディアクエリが true の場合、ユーザーがオペレーティング システムをダークモードに設定し、ダークモードの UI を好んでいることを意味します。

コマンド メニューを開き、レンダリングを表示コマンドを実行して、CSS メディア特性 prefers-color-scheme をエミュレート プルダウンを設定し、prefers-color-scheme: dark スタイルと prefers-color-scheme: light スタイルをデバッグします。

prefers-color-scheme: dark

prefers-color-scheme: dark が設定されている場合（中央のボックス）、[スタイル] ペイン（右のボックス）には、メディアクエリが true のときに適用される CSS が表示され、ビューポートにはダークモードのスタイルが表示されます（左のボックス）。

CSS メディア特性 prefers-color-scheme をエミュレートのプルダウンの横にある、CSS メディア特性 prefers-reduced-motion をエミュレートのプルダウンを使用して、prefers-reduced-motion: reduce をシミュレートすることもできます。

Chromium の問題 #1004246

タイムゾーンのエミュレーション

[センサー] タブでは、位置情報をオーバーライドできるだけでなく、任意のタイムゾーンをエミュレートして、ウェブアプリへの影響をテストできるようになりました。この新機能は、位置情報エミュレーションの信頼性も向上させます。以前は、ウェブアプリはユーザーのローカル タイムゾーンと位置情報を照合することで、位置情報のスプーフィングを検出できました。位置情報とタイムゾーンのエミュレーションが結合されたため、このカテゴリの不一致は解消されます。

コード カバレッジの更新

[カバレッジ] タブを使用すると、使用されていない JavaScript と CSS を見つけることができます。

[カバレッジ] タブで、使用済みコードと未使用コードを表す新しい色が使用されるようになりました。この色の組み合わせは、色覚障がいのあるユーザーにとってよりアクセシブルであることが証明されています。左側の赤いバーは未使用のコードを表し、右側の青いバーは使用済みのコードを表します。

新しいカバレッジのタイプフィルタ テキスト ボックスでは、カバレッジ情報をタイプ別にフィルタできます。JavaScript のカバレッジのみ、CSS のカバレッジのみ、またはすべてのタイプのカバレッジを表示できます。

[一致率] タブ。

[一致率] タブ。

[ソース] パネルには、コード カバレッジ データが利用可能な場合に表示されます。行番号の横にある赤または青のマークをクリックすると、[カバレッジ] タブが開き、ファイルがハイライト表示されます。

[ソース] パネルのカバレッジ データ。

[ソース] パネルのカバレッジ データ。8 行目は未使用のコードの例です。11 行目は、使用されているコードの例です。

Chromium の問題 #1003671、#1004185

ネットワーク リソースがリクエストされた理由をデバッグする

ネットワーク アクティビティを記録したら、ネットワーク リソースを選択し、[イニシエータ] タブに移動して、リソースがリクエストされた理由を確認します。[リクエストのコールスタック] セクションには、ネットワーク リクエストにつながる JavaScript のコールスタックが表示されます。

[イニシエータ] タブ。

[開始者] タブ。

Chromium の問題 963183、842488

コンソール パネルとソースパネルでインデント設定が再び尊重されるようになりました

DevTools には、インデントの優先設定を 2 スペース、4 スペース、8 スペース、タブにカスタマイズする設定が長らく用意されています。最近では、コンソール パネルとソース パネルでこの設定が無視されるため、この設定は実質的に無意味になっていました。このバグは修正されました。

[設定] > [各種設定] > [ソース] > [デフォルトのインデント] に移動して、設定を行います。

Chromium の問題 #977394

カーソル ナビゲーションの新しいショートカット

[Console] パネルまたは [Sources] パネルで Control+P を押すと、カーソルが上の行に移動します。Ctrl+N キーを押すと、カーソルが下の行に移動します。

Chromium の問題 #983874

プレビュー チャネルをダウンロードする

Chrome の Canary、Dev、Beta をデフォルトの開発ブラウザとして使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーがサイトの問題を発見する前に、問題を特定することもできます。

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容の一覧。