DevTools の新機能（Chrome 66）

Kayce Basques

Chrome 66 の DevTools の新機能と主な変更点は次のとおりです。

以下でリリースノートの動画版をご覧ください。

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

[ネットワーク] パネルの [Initiator] 列には、リソースがリクエストされた理由が表示されます。たとえば、JavaScript が画像の取得をトリガーした場合、[Initiator] 列には、リクエストの原因となった JavaScript コードの行が表示されます。

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

このシナリオでは、リクエストの原因となるアプリケーション コードを確認する必要があります。以下のように、

  1. [開始者] 列にカーソルを合わせます。リクエストの原因となったコールスタックがポップアップに表示されます。
  2. 開始元の結果から非表示にする呼び出しを右クリックします。
  3. [Add script to ignore list] を選択します。[開始元] 列に、無視したスクリプトからの呼び出しが非表示になりました。

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

図 1. requests.js を無視

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

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

[プレビュー] タブと [レスポンス] タブでの美しい出力

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

[プレビュー] タブには、デフォルトで analytics.js の内容が美しく表示されます。

図 2. デフォルトで analytics.js の内容を [プレビュー] タブに表示

リソースの未圧縮バージョンを表示するには、[レスポンス] タブを使用します。[Response] タブの新しい [Format] ボタンから、リソースを手動で美しく表示することもできます。

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

図 3. [Format] ボタンを使用して 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. click ブレークポイントが Vue.js のラッパーコードで一時停止する

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

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

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

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

クリック ブレークポイントがアプリのリスナー コードで停止するようになりました。

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

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

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

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

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

DevTools の新機能

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