DevTools の新機能（Chrome 62）

Kayce Basques

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

で確認できます。

コンソールの最上位の 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。このノードは、ブラウザの [DOM Tree] で [要素] パネル

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

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

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

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

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

要素に影響している CSS グリッドを表示するには、 [要素] パネル。グリッド アイテムの周囲に破線の枠線が表示されます。この方法は、 選択したアイテム、または選択したアイテムの親に display:grid が適用されています。

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

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

CSS グリッドの基本を 2 分以内で学ぶには、以下の動画をご覧ください。

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

コンソールから queryObjects(Constructor) を呼び出して、 作成されます。例:

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

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

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

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

ネガティブ フィルタ

[Filter] ボックスに「-<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 を含む。スクリプト名にカーソルを合わせると、ホスト名に次のテキストが含まれていることがわかります。

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

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

HAR ファイルのインポート

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

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

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

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。