DevTools の新機能（Chrome 66）

Kayce Basques
Kayce Basques
X GitHub

Chrome 66 の DevTools には、次のような新機能と大きな変更が加えられています。

以下をお読みになるか、以下のリリースノートの動画版をご覧ください。

ネットワーク パネルでスクリプトを無視する

[ネットワーク] パネルの [イニシエータ] 列には、リソースがリクエストされた理由が表示されます。たとえば、JavaScript が原因で画像がフェッチされた場合、[イニシエータ] 列には、リクエストの原因となった JavaScript コードの行が表示されます。

以前は、フレームワークがネットワーク リクエストをラッパーでラップしている場合、[イニシエータ] 列はあまり役に立ちませんでした。すべてのネットワーク リクエストが同じラッパーコードの行を指していました。

このシナリオで実際に必要なのは、リクエストの原因となったアプリケーション コードを確認することです。次のことが可能になりました。

  1. [イニシエータ] 列にカーソルを合わせます。リクエストの原因となったコールスタックがポップアップで表示されます。
  2. イニシエータの結果から非表示にする呼び出しを右クリックします。
  3. [無視リストにスクリプトを追加] を選択します。[イニシエータ] 列で、無視したスクリプトからの呼び出しが非表示になりました。

「requests.js」を無視しています。

図 1. requests.js を無視する

無視したスクリプトは、[設定] の [無視リスト] タブで管理できます。

スクリプトの無視について詳しくは、スクリプトまたはスクリプト パターンを無視するをご覧ください。

[プレビュー] タブと [レスポンス] タブでのプリティ プリント

ネットワーク パネルの [プレビュー] タブで、リソースが縮小されていることが検出された場合、デフォルトでリソースが整形出力されるようになりました。

[プレビュー] タブで、デフォルトで analytics.js の内容が整形されて表示されている。

図 2. [プレビュー] タブで analytics.js の内容がデフォルトでプリティプリントされる

リソースの最小化されていないバージョンを表示するには、[レスポンス] タブを使用します。[レスポンス] タブで、新しい [形式] ボタンを使用して、リソースを手動でプリティ プリントすることもできます。

[フォーマット] ボタンを使用して analytics.js の内容を手動で整形する。

図 3. [形式] ボタンを使用して analytics.js の内容を手動で整形する

[プレビュー] タブで HTML コンテンツをプレビューする

以前は、ネットワーク パネルの [プレビュー] タブに、特定の状況では HTML リソースのコードが表示され、別の状況では HTML のプレビューが表示されていました。[プレビュー] タブで HTML の基本的なレンダリングが常に実行されるようになりました。完全なブラウザを意図したものではないため、HTML が期待どおりに表示されない場合があります。HTML コードを表示するには、[レスポンス] タブをクリックするか、リソースを右クリックして [ソースパネルで開く] を選択します。

[プレビュー] タブで HTML をプレビューする。

図 4. [プレビュー] タブで HTML をプレビューする

デバイスモードでのズームの自動調整

デバイスモードで、ズーム プルダウンを開き、[ズームを自動調整] を選択すると、デバイスの向きを変更するたびにビューポートのサイズが自動的に変更されます。

ローカル オーバーライドが HTML で定義された一部のスタイルに対応

Chrome 65 で DevTools の ローカル オーバーライドがリリースされた当初、HTML 内で定義されたスタイルの変更を追跡できないという制限がありました。たとえば、図 7 では、ドキュメントの head に h1 要素の font-weight: bold を宣言するスタイルルールがあります。

HTML 内で定義されたスタイルの例

図 5. HTML 内で定義されたスタイルの例

Chrome 65 では、DevTools の [スタイル] ペインで font-weight 宣言を変更した場合、ローカル オーバーライドで変更が追跡されませんでした。つまり、次にリロードすると、スタイルは font-weight: bold に戻ります。Chrome 66 では、このような変更がページ読み込み後も保持されるようになりました。

ボーナス ヒント: フレームワーク スクリプトを無視してイベント リスナー ブレークポイントをより便利にする

JavaScript のデバッグ入門の動画を作成した当時、フレームワークの上に構築されたアプリではイベント リスナー ブレークポイントは役に立たないというコメントが視聴者から寄せられました。イベント リスナーはフレームワーク コードでラップされていることが多いためです。たとえば、図 8 では、DevTools で click ブレークポイントを設定しています。デモのボタンをクリックすると、DevTools はリスナーコードの最初の行で自動的に一時停止します。この場合、Vue.js のラッパーコードの 1802 行目で一時停止しますが、これはあまり役に立ちません。

クリック ブレークポイントは Vue.js のラッパーコードで一時停止します。

図 6. Vue.js のラッパーコードで click ブレークポイントが一時停止する

Vue.js スクリプトは別のファイルにあるため、この click ブレークポイントをより有効にするために、[コールスタック] ペインでそのスクリプトを無視できます。

[コールスタック] ペインで Vue.js スクリプトを無視する。

図 7. [コールスタック] ペインで Vue.js スクリプトを無視する

次にボタンをクリックして click ブレークポイントをトリガーすると、Vue.js コードが一時停止せずに実行され、アプリのリスナーの最初のコード行で一時停止します。これが、私がずっと一時停止させたかった場所です。

クリック ブレークポイントがアプリのリスナー コードで一時停止します。

図 8. click ブレークポイントがアプリのリスナー コードで一時停止するようになりました

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

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

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

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

DevTools の新機能

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