DevTools の新機能（Chrome 66）

Kayce Basques

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

で確認できます。

本記事を読むか、以下のリリースノートの動画をご覧ください。

[Network] パネルの [Ignore Script]

[ネットワーク] パネルの [イニシエータ] 列には、リソースがリクエストされた理由が表示されます。対象 たとえば、JavaScript によってイメージが取得された場合、[Initiator] 列には リクエストを発生させた JavaScript コード。

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

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

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

「requests.js」を無視。

図 1. requests.js を無視しています

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

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

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

[ネットワーク] パネルの [プレビュー] タブで、デフォルトでリソースが 圧縮されていることを示します。

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

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

リソースの非圧縮バージョンを表示するには、[レスポンス] タブを使用します。手動で プリティ プリント リソースを [Response] タブから取得するには、新しい [Format] ボタンを使用します。

[表示形式] ボタンを使用して analytics.js の内容を手動でプリティ プリントする。

図 3. [Format] ボタンを使用して、analytics.js の内容を手動でプリティ プリントする

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

これまでは、[ネットワーク] パネルの [プレビュー] タブに、HTML リソースのコードが 他の状況では HTML のプレビューをレンダリングする場合もあります。[プレビュー] タブが常に表示されるようになりました HTML の基本的なレンダリングを行います。フル インターネット ブラウザを意図したものではないため、表示されない場合があります HTML を作成します。HTML コードを表示するには、[レスポンス] タブをクリックします。または、 リソースを右クリックして [Open in Sourcespanel] を選択します。

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

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

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

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

HTML で定義された一部のスタイルでローカル オーバーライドが機能するようになりました

Chrome 65 で DevTools がローカル オーバーライドをリリースしたときは、 HTML 内で定義されたスタイルへの変更をトラッキングできませんでした。たとえば、図 7 には、 ルール（h1 要素に対して font-weight: bold を宣言するドキュメントの head にあります）

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

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

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

参考: フレームワーク スクリプトを無視して、イベント リスナー ブレークポイントの利便性を高める

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

クリック ブレークポイントは Vue.js で一時停止する構成されます。

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

Vue.js スクリプトは別のファイル内にあるため、コールスタックのスクリプトは無視してかまいません。 この click ブレークポイントの利便性を高めるためです。

[Call Stack] ペインから Vue.js スクリプトを無視する。

図 7. [Call Stack] ペインから Vue.js スクリプトを無視する

次にボタンをクリックして click ブレークポイントをトリガーすると、Vue.js コードが実行されます。 その後、アプリのリスナーのコードの最初の行で一時停止します。 何度も立ち止まっていたところです

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

図 8. click ブレークポイントがアプリのリスナーコードで一時停止する

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

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

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

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

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

DevTools の新機能

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