DevTools の新機能（Chrome 79）

Kayce Basques

Cookie の新機能

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

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

[Cookie] タブ。

[Cookie] タブ。

  • 黄色のリクエスト Cookie がネットワーク経由で送信されていない。これらはデフォルトでは非表示になっています。[表示] をクリックします。 リクエスト Cookie を除外して表示することもできます。
  • 黄色のレスポンス Cookie がネットワーク経由で送信されましたが、保存されていません。
  • [その他の情報] にカーソルを合わせます。 情報 で、Cookie が保存された理由を調べる はブロックされました。
  • リクエスト Cookie テーブルとレスポンス Cookie テーブル内のデータの大部分は、 リソースの HTTP ヘッダーを付加します。ドメイン、パス、有効期限/Max-Age データは、 Chrome DevTools プロトコル。

Chromium の問題 #856777、#993843

Cookie 値を表示する

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

Cookie の値の表示。

Cookie の値の表示。

Chromium の問題 #462370

さまざまな優先カラーパターンと優先モーションの優先設定をシミュレートする

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

コマンド メニュー を開いて [レンダリングを表示] コマンドを実行して、[CSS メディアのエミュレート] を feature Preferreds-color-scheme プルダウンを使って prefers-color-scheme: dark をデバッグし、 prefers-color-scheme: light スタイル。

Preferreds-color-scheme: 暗い

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

「CSS メディアをエミュレートする」機能を使用して、prefers-reduced-motion: reduce をシミュレートすることもできます。 [CSS メディア機能をエミュレート] の横にある Preferreds-reduced-motion プルダウン 選択します。

Chromium の問題 #1004246

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

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

コード カバレッジの更新

[カバレッジ] タブは、使用していない JavaScript や CSS を特定するのに役立ちます。

[カバレッジ] タブで、使用されているコードと未使用のコードを新しい色で表すようになりました。この色の組み合わせは 色覚に障がいを持つ人にとっては利用しやすいことが実証されています。左側の赤いバーは は使用されていないコード、右側の青みがかったバーは使用済みのコードを示します。

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

[カバレッジ] タブ

[カバレッジ] タブ

コード カバレッジ データがある場合は、[Sources] パネルに表示されます。赤または青みがかったマークをクリックする。 [カバレッジ] タブが開き、ファイルがハイライト表示されます。

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

[Sources] パネルのカバレッジ データ。8 行目は未使用のコードの例です。11 行目は できます。

Chromium の問題 #1003671、#1004185

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

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

[イニシエータ] タブ。

[イニシエータ] タブ。

Chromium の問題 963183、842488

コンソール パネルとソースパネルでインデント設定を再び考慮

DevTools には以前から、インデントの設定をスペース 2 つ、スペース 4 つ、 8 個のスペース、またはタブ。最近では、この設定は基本的に役に立たませんでした。コンソールと ソースパネルで設定が無視されていました。このバグは現在修正されています。

[設定] に移動します。[設定] >出典 >デフォルトのインデント: 選択します。

Chromium の問題 #977394

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

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

Chromium の問題 #983874

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。