DevTools の新機能(Chrome 62)

Chrome 62 でリリースされる DevTools の新機能と変更点:

コンソールの最上位の await 演算子

コンソールで、トップレベルの await 演算子がサポートされるようになりました。

コンソールでトップレベルの await 演算子を使用する

図 1. コンソールでの最上位の await 演算子の使用

スクリーンショットの新しいワークフロー

ビューポートの一部または特定の HTML ノードのスクリーンショットを撮れるようになりました。

ビューポートの一部のスクリーンショット

ビューポートの一部のスクリーンショットを撮るには:

  1. [検証] 検査 をクリックするか、Command+Shift+C キー(Mac)または Ctrl+Shift+C キー(Windows、Linux)を押して、要素モードを検査します。
  2. command キー(Mac)または Ctrl キー(Windows、Linux)を押したまま、スクリーンショットを撮るビューポートの部分を選択します。
  3. マウスを放します。選択した部分のスクリーンショットがダウンロードされます。

ビューポートの一部のスクリーンショットを撮る

図 2. ビューポートの一部のスクリーンショットを撮る

特定の HTML ノードのスクリーンショット

特定の HTML ノードのスクリーンショットを撮るには:

  1. [要素] パネルで要素を選択します。

    ノードの例

    図 3. この例では、Tools というテキストを含む青色のヘッダーのスクリーンショットを撮ることを目指しています。このノードは、[Elements] パネルの [DOM Tree] ですでに選択されています。

  2. コマンド メニューを開きます。

  3. node」と入力し、[Capture node screenshot] を選択します。選択したノードのスクリーンショットがダウンロードされます。

    [Capture node screenshot] コマンドの結果

    図 4. Capture node screenshot コマンドの結果

CSS グリッドのハイライト表示

要素に影響を与えている CSS グリッドを表示するには、[Elements] パネルの [DOM Tree] で要素にカーソルを合わせます。各グリッド アイテムの周囲に破線の枠線が表示されます。これは、選択したアイテム、または選択したアイテムの親に display:grid が適用されている場合にのみ機能します。

CSS グリッドのハイライト表示

図 5. CSS グリッドのハイライト表示

以下の動画では、CSS グリッドの基本を 2 分以内で説明しています。

ヒープ オブジェクトをクエリするための新しい API

コンソールから queryObjects(Constructor) を呼び出して、指定したコンストラクタで作成されたオブジェクトの配列を返します。次に例を示します。

  • queryObjects(Promise)。すべての Promise を返します。
  • queryObjects(HTMLElement)。すべての HTML 要素を返します。
  • queryObjects(foo)。ここで、foo は関数名です。new foo() によってインスタンス化されたすべてのオブジェクトを返します。

queryObjects() のスコープは、コンソールで現在選択されている実行コンテキストです。実行コンテキストの選択をご覧ください。

コンソールの新しいフィルタ

コンソールで、除外フィルタと URL フィルタがサポートされるようになりました。

除外フィルタ

[フィルタ] ボックスに「-<text>」と入力して、<text> を含むコンソール メッセージを除外します。

フィルタで除外される 3 つのメッセージの例

図 6. 最初のステートメントは、onetwothreefourConsole に記録します。[フィルタ] ボックスに -two が入力されているため、two は非表示になっています。

<text> が見つかった場合、DevTools はメッセージをフィルタします。

  • メッセージ テキスト。
  • メッセージの送信元のファイル名。
  • スタック トレースのテキスト。

ネガティブフィルタは、-/[4-5]*ms/ などの正規表現にも対応しています。

URL フィルタ

[フィルタ] ボックスに「url:<text>」と入力して、URL に <text> が含まれるスクリプトからのメッセージのみを表示します。

このフィルタではファジー一致を使用します。<text> が URL のどこかに存在する場合、DevTools によってメッセージが表示されます。

URL フィルタリングの例

図 7. URL フィルタリングを使用して、URL に hymn を含むスクリプトからのメッセージのみを表示する。スクリプト名にカーソルを合わせると、ホスト名に次のテキストが含まれていることがわかります。

[Network] パネルでの HAR インポート

HAR ファイルを [Network] パネルにドラッグ&ドロップしてインポートします。

HAR ファイルのインポート

図 8. HAR ファイルのインポート

[Application] パネルでプレビュー可能なキャッシュ リソース

[Cache Storage] テーブルの行をクリックすると、テーブルの下にリソースのプレビューが表示されます。

キャッシュ リソースのプレビュー

図 9. キャッシュ リソースのプレビュー

キャッシュのデバッグの応答性が向上

Chrome 61 以前では、Cache API で作成されたキャッシュのデバッグは大まかにしか行えません。たとえば、ページで新しいキャッシュが作成された場合、新しいキャッシュを表示するには、ページまたは DevTools を手動で更新する必要があります。

Chrome 62 では、キャッシュやリソースを作成、更新、削除するたびに、[キャッシュ ストレージ] タブがリアルタイムで更新されるようになりました。下の動画で例をご覧ください。

キャッシュ ストレージのデモを参照して、実際に試すことができます。

ブロックレベルのコード カバレッジ

Chrome 61 以前では、[カバレッジ] タブには、関数が呼び出されている間、関数内のすべてのコードが使用中としてマークされます。

Chrome 61 の [カバレッジ] タブの例

図 10. Chrome 61 の [カバレッジ] タブの例。4 行目は実行されませんが 使用済みとマークされます

Chrome 62 以降では、[カバレッジ] タブに、関数内のどのコードが呼び出されたかが表示されるようになりました。

Chrome 62 の [カバレッジ] タブの例

図 11. Chrome 62 の [カバレッジ] タブの例。4 行目は未使用とマークされています

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

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