DevTools のタブを自分に合うように並べ替えてください。フレームワーク イベントがどこでバインドされたかを正確に確認し、ネットワーク リクエストをブロックして、処理速度が遅くなっているサードパーティ スクリプトを確認します。
パネル ナビゲーションの改善: 2 番のコンソール、タブの並べ替え、わかりやすい下線
DevTools のどの部分が最も使用されているかを調査した結果、フルスクリーン コンソール パネルをメインタブバーの最後の位置に配置することは適切ではないことが明らかになりました。2 番目によく使用されるパネルとして、2 番目のタブになりました。これは、すべてのタブを一度に表示できない低解像度で特に重要です。
しかし Google は確かに従来の順序は筋肉記憶の一部になっているため、しばらくは混乱する可能性があります。全画面表示のコンソールが嫌いという方もいるかもしれません。ご安心ください。タブは、次のようにドラッグして並べ替えることができます。
タブバーに加えた変更は保持され、ネイティブ タブと拡張機能が提供するタブの両方で機能します。さらに、滑らかなアニメーションの下線も追加しました。そういう優しい会社だからです。
フレームワーク イベント リスナーのサポート
jQuery などの JS フレームワークによって作成されたイベントは、DevTools での作業時に問題になることがありました。これは、ほとんどのフレームワークがネイティブ DOM イベントをカスタム イベント API にラップしているため、イベント リスナーを調べても、何が起こっているのかを把握するのは難しいからです。
ただし、[イベント リスナー] タブの新しい [フレームワーク リスナー] オプションを使用すると、DevTools はフレームワークのラップ部分を認識し、自動的に解決します。フレームワークによってバインドされたイベントは、ネイティブ イベントとまったく同じように動作し、実際にバインドされた場所を示すようになりました。
その他の主な新機能
- カスタム オブジェクト フォーマッタを使用すると、CoffeeScript などのトランスパイル言語で、DevTools コンソールでオブジェクトをより適切にフォーマットできます。
タイムラインに、録画中のステータス、時間、バッファ使用量が一目でわかる、見栄えの良い新しいダイアログが追加されました。
同様に、ネットワーク パネルが空の場合に、役立つヒントが表示されるようになりました。
フィルタ入力を使用して
mixed-content:displayedに設定することで、[ネットワーク] パネルで混合コンテンツをフィルタできるようになりました。
いつものように、Twitter または下記のコメント欄からご意見をお寄せください。バグは crbug.com/new に送信してください。
どうぞよろしくお願いいたします。 Paul Bakaus と DevTools チーム