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

DevTools の新機能（Chrome 66）

Kayce Basques

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

[ネットワーク] パネルの [スクリプトを無視]
Device Mode でズームを自動調整する
[プレビュー] タブと [レスポンス] タブのプリティプリント
[プレビュー] タブで HTML コンテンツをプレビューする
HTML 内のスタイルでのローカルオーバーライド

注: お使いの Chrome のバージョンを chrome://version でご確認ください。これより前のバージョンを実行している場合、これらの機能はありません。それ以降のバージョンを実行している場合は、これらの機能が変更された可能性があります。Chrome は約 6 週間ごとに新しいメジャーバージョンに自動更新されます。

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

[Network] パネルの [Ignore script]

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

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

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

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

「requests.js」を無視。

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

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

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

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

[Network] パネルの [Preview] タブでは、リソースが圧縮されていることを検出したときに、デフォルトでリソースをプリティプリントするようになりました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue.js スクリプトは別のファイルにあるため、[Call Stack] ペインでこのスクリプトを無視して、この 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。