DevTools ダイジェスト - タブの並べ替え、Console on 2、フレームワーク イベント リスナー

DevTools のタブをニーズに合わせて並べ替えることができます。フレームワーク イベントがどこでバインドされたかを正確に確認し、ネットワーク リクエストをブロックして、どのサードパーティ製スクリプトによって処理が遅くなっているかを確認します。

パネル ナビゲーションの向上: コンソール #2、タブの並べ替え、わかりやすい下線

DevTools のどの領域が最も頻繁に使用されるかを調査した結果、全画面表示のコンソール パネルはメインのタブバーの最後の位置にふさわしくないということが明らかになりました。2 番目に使用されているパネルが、2 番目のタブになりました。これは、すべてのタブを一度に表示できない場合に解像度が低い場合に特に重要です。

でも、ほら、わかるよ。古典的な順序は筋肉の記憶の一部であり、しばらくの間はめまいを感じます。あるいは、全画面コンソールが大嫌いだったのかもしれない。安心してください。Google がサポートします。タブは、次のようにドラッグして並べ替えられるようになります。

タブバーに加えた変更は維持され、ネイティブ タブと拡張機能提供のタブの両方で機能します。また、スムーズなアニメーションの下線も表示されるため、私たちはいい人ですから。

フレームワーク イベント リスナーのサポート

DevTools を使用する際に、jQuery などの JS フレームワークによって作成されたイベントは問題になることがありました。これは、ほとんどのフレームワークがネイティブ DOM イベントをカスタム イベント API にラップするため、イベント リスナーを確認しても何が起こっているかを詳しくは把握できないためです。

フレームワーク リスナー OFF

しかし、[Event Listener] タブの新しい [Framework Listeners] オプションを使用すると、DevTools でフレームワークのラップ部分が認識され、自動的に解決されます。フレームワークによってバインドされたイベントは、外観と動作がネイティブで、実際にバインドされている場所とまったく同じように動作するようになりました。

フレームワーク リスナー オン

その他の主なメリット

  • カスタム オブジェクト フォーマッタを使用すると、CoffeeScript などのトランスパイルされた言語で DevTools コンソールでのオブジェクトのフォーマットを改善できます。
  • 録画中のタイムラインのダイアログが新しくなり、ステータス、時間、バッファの使用状況が一目でわかるようになりました。

    タイムラインのヒント。
  • 同じ行に沿って、[Network] パネルには有用なヒントが現時点で空の場合に表示されます。

    ネットワーク ヒント。
  • フィルタ入力を使用して mixed-content:displayed を設定することで、ネットワーク パネルで混合コンテンツをフィルタできるようになりました。


いつものように、Twitter または以下のコメントでご意見をお寄せください。また、バグについては crbug.com/new までお送りください。

来月まで!Paul Bakaus と DevTools チーム