DevTools の新機能(Chrome 79)

Cookie の新機能

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

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

[Cookie] タブ。

[Cookie] タブ。

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

Chromium の問題 #856777#993843

Cookie の値を表示する

[Cookie] ペインの行をクリックして、その Cookie の値を表示します。

Cookie の値の表示。

Cookie の値の表示。

Chromium の問題 #462370

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

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

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

Preferreds-color-scheme: ダーク

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

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

Chromium の問題 #1004246

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

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

コード カバレッジの更新

[カバレッジ] タブは、使用されていない JavaScript と CSS を見つけるのに役立ちます。

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

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

[カバレッジ] タブ。

[カバレッジ] タブ。

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

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

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

Chromium の問題 #1003671#1004185

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

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

[Initiator] タブ。

[Initiator] タブ。

Chromium の問題 963183842488

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

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

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

Chromium の問題 #977394

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

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

Chromium の問題 #983874

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

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

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

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

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

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59