DevTools の新機能(Chrome 66)

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

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

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

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

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

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

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

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

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

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

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

[Preview] タブと [Response] タブでのプリティ プリント

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

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

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

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

[表示形式] ボタンから、analytics.js のコンテンツを手動でプリティ プリントする。

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

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

以前は、[Network] パネルの [Preview] タブには、特定の状況では 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 スクリプトは別のファイル内にあるため、[Call Stack] ペインでそのスクリプトを無視して、この click ブレークポイントをより便利にすることができます。

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

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

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

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

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

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

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

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

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

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

DevTools の新機能

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59