DevTools の新機能（Chrome 62）

Chrome 62 の DevTools に追加される新機能と変更点:

• コンソールでの最上位の await 演算子のサポート。
• ビューポートの一部をキャプチャしたスクリーンショット、特定の HTML ノードをキャプチャしたスクリーンショット。
• CSS グリッドのハイライト表示。
• オブジェクトをクエリするための新しい Console API。
• コンソールの除外フィルタとURL フィルタ。
• [ネットワーク] パネルでの HAR のインポート。
• プレビュー可能なキャッシュ リソース。
• キャッシュのデバッグがより予測可能に。
• ブロックレベルのコード カバレッジ。

コンソールのトップレベルの await 演算子

コンソールで最上位の await 演算子がサポートされるようになりました。

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

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

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

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

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

1. [検証] をクリックするか、Command+Shift+C キー（Mac）または Ctrl+Shift+C キー（Windows、Linux）を押して、要素の検証モードに入ります。
2. Command（Mac）または Control（Windows、Linux）を押したまま、スクリーンショットを撮るビューポートの部分を選択します。
3. マウスを離します。DevTools が、選択した部分のスクリーンショットをダウンロードします。

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

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

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

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

   

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

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

3. 「node」と入力し、[Capture node screenshot] を選択します。デベロッパー ツールは、選択したノードのスクリーンショットをダウンロードします。

   

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

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

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

図 5. CSS グリッドをハイライト表示する

以下の動画では、CSS グリッドの基本を 2 分以内で学ぶことができます。

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

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

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

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

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

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

除外フィルタ

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

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

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

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

否定フィルタは、-/[4-5]*ms/ などの正規表現でも使用できます。

URL フィルタ

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

このフィルタではファジー マッチングが使用されます。URL のどこかに <text> が含まれている場合、デベロッパー ツールにメッセージが表示されます。

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

ネットワーク パネルでの HAR のインポート

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

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

アプリケーション パネルでプレビュー可能なキャッシュ リソース

[キャッシュ ストレージ] テーブルの行をクリックすると、テーブルの下にそのリソースのプレビューが表示されます。

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

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

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

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

Cache Storage のデモで、ご自身でお試しください。

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

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

図 10. Chrome 61 の [カバレッジ] タブの例。4 行目は実行されないにもかかわらず、使用済みとマークされる

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

図 11. Chrome 62 の [一致率] タブの例。4 行目が未使用とマークされている

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能のリクエストは、crbug.com からお送りください。
• DevTools の more_vert その他アイコン > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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