DevTools の新機能（Chrome 79）

Kayce Basques

Cookie の新機能

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

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

[Cookie] タブ。

[Cookie] タブ。

  • 黄色のリクエスト Cookie がワイヤー経由で送信されませんでした。これらのフィールドはデフォルトで非表示になっています。[除外したリクエスト Cookie を表示] をクリックして表示します。
  • 黄色のレスポンス Cookie はワイヤー経由で送信されましたが、保存されませんでした。
  • [詳細] 情報 にカーソルを合わせると、Cookie がブロックされた理由を確認できます。
  • [リクエスト Cookie] テーブルと [レスポンス Cookie] テーブルのデータのほとんどは、リソースの HTTP ヘッダーから取得されます。[Domain]、[Path]、[Expires/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

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

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

[イニシエータ] タブ。

[開始者] タブ。

Chromium の問題 963183、842488

コンソールとソースパネルでインデントの設定が再び適用される

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

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

Chromium の問題 #977394

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

コンソール パネルまたはソースパネルで Ctrl+P キーを押すと、カーソルが上の行に移動します。Ctrl+N を押して、カーソルを下の行に移動します。

Chromium の問題 #983874

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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