DevTools の新機能（Chrome 62）

Kayce Basques

Chrome 62 の DevTools の新機能と変更点:

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

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

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

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

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

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

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

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

  1. [検証] 検証 をクリックするか、Command+Shift+C（Mac）または Control+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] を選択します。選択したノードのスクリーンショットが DevTools にダウンロードされます。

    「ノードのスクリーンショットをキャプチャ」コマンドの結果

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

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

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

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

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

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

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

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

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

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

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

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

除外フィルタ

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

除外される 3 つのメッセージの例

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

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

  • メッセージ テキスト内。
  • メッセージの送信元のファイル名に記録されます。
  • スタック トレース テキストで確認できます。

除外フィルタは、-/[4-5]*ms/ などの正規表現でも機能します。

URL フィルタ

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

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

URL フィルタリングの例

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

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

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

HAR ファイルのインポート

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

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

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

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

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

キャッシュのデバッグがより応答的になる

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

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

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

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

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

Chrome 61 の [Coverage] タブの例

図 10. Chrome 61 の [Coverage] タブの例。行 4 は、実行されなくても使用済みとしてマークされます。

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

Chrome 62 の [Coverage] タブの例

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

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

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

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

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

DevTools の新機能

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