このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 62）

Kayce Basques

Chrome 62 で導入される DevTools の新機能と変更:

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

注: お使いの Chrome のバージョンは chrome://version で確認できます。Chrome は約 6 週間ごとに新しいメジャーバージョンに自動更新されます。

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

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

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

図 1. コンソールでのトップレベルの await 演算子の使用

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

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

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

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

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

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

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

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

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

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

図 3. この例では、テキスト Tools を含む青色のヘッダーのスクリーンショットを撮ることが目標です。このノードは、[要素] パネルの [DOM ツリー] ですでに選択されています。
コマンドメニューを開きます。
「node」と入力して [Capture node screenshot] を選択します。選択したノードのスクリーンショットがダウンロードされます。

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

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

要素に影響している CSS グリッドを表示するには、[要素] パネルの [DOM ツリー] で要素にカーソルを合わせます。グリッドアイテムの周囲に破線の枠線が表示されます。これは、選択したアイテム、または選択したアイテムの親に 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 行目は“Used”とマークされていますが

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

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

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

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。