このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 79）

Kayce Basques

Cookie の新機能

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

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

[Cookie] タブ。

[Cookie] タブ。

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

Chromium の問題 #856777、#993843

Cookie 値を表示する

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

Cookie の値の表示。

Chromium の問題 #462370

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

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

コマンドメニューを開いて [Show Rendering] コマンドを実行し、[Emulate CSS media feature Preferreds-color-scheme] プルダウンを設定して、prefers-color-scheme: dark スタイルと prefers-color-scheme: light スタイルをデバッグします。

Preferreds-color-scheme: ダーク

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

また、[Emulate CSS media feature Preferreds-color-scheme] プルダウンの横にある [Emulate CSS media featureprefers-reduced-motion] プルダウンを使用して prefers-reduced-motion: reduce をシミュレートすることもできます。

Chromium の問題 #1004246

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

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

コードカバレッジの更新

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

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

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

[カバレッジ] タブ

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

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

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

Chromium の問題 #1003671、#1004185

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

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

[イニシエータ] タブ。

[イニシエータ] タブ。

Chromium の問題 963183、842488

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

以前から、DevTools には、インデントの設定をスペース 2 個、スペース 4 個、スペース 8 個、またはタブにカスタマイズする設定がありました。最近では、[Console] パネルと [Sources] パネルで設定が無視されていたため、この設定は基本的に役に立ちませんでした。このバグは現在修正されています。

[Settings] > [Preferences] > [Sources] > [Default Indentation] に移動して、設定を行います。

Chromium の問題 #977394

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

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

Chromium の問題 #983874

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。