これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。
ビデオ: Microsoft Edge |DevTools 97 の新機能
デタッチされた要素ツールの導入
2025 年 3 月の更新: 切断された要素ツール が削除されました。 DOM メモリ リークをデバッグするには、メモリ ツールで Detached elements プロファイリングの種類を使用します。
DOM ノードが DOM のどの要素にもアタッチされていないが、Microsoft Edge によってメモリに保持されている場合、DOM ノードは 切断されている と見なされます。 要素がページ上にないか、DOM の一部でなくなった場合でも、一部の JavaScript オブジェクトが要素を参照しているため、ブラウザーは切り離された要素をガベージ コレクションできません。
新しい切り 離された要素 機能は、ページ上の切り離された要素をすべて検索して表示します。 切断された要素を展開したり折りたたんだりして、保持されている親ノードと子ノードも表示できます。 [ ガベージの収集] アイコンをクリックしてブラウザーのガベージ コレクションをトリガーし、デタッチされた要素をガベージ コレクションできない場合は、メモリ リークが発生していることを確認できます。 切り離された要素を参照している JavaScript コードに移動するには、[分析] ボタンをクリックしてヒープ スナップショットを取得します。
切断された要素機能は、当初は Microsoft Edge バージョン 93 の実験として利用できました。 この機能は、Microsoft Edge バージョン 97 で既定で使用できるようになりました。
関連項目:
- メモリの問題を修正するで切断された要素を調査するためのツール。
- DOM メモリ リークのデバッグ (「デタッチされた要素」プロファイリングの種類)
- Microsoft Edge を使用した Web 開発に関するビデオで、Microsoft Edge 切断された要素ツールを使用してメモリリークをデバッグします。
Visual Studio Code 向け Microsoft Edge DevTools 拡張機能
この拡張機能の一般的な情報については、「 Visual Studio Code 向け Microsoft Edge DevTools 拡張機能」を参照してください。
スクリーンキャストの機能強化、非推奨の警告、および Microsoft Edge の新しい起動オプション
Visual Studio Code 用の Microsoft Edge DevTools 拡張機能の現在のバージョンでは、コミュニティによって報告されたいくつかの問題が修正されています。
スクリーン キャストのエミュレートされたデバイスの一覧が、ブラウザーのエミュレートされたデバイスの一覧と同じになりました。
デバイス エミュレーションによって、正しいユーザー エージェント文字列が追加され、正しい表示がトリガーされるようになりました。
非推奨の起動バージョンの Microsoft Edge を使用すると、機能を見逃したことを示す警告が表示されるようになりました。
特別なセットアップが必要な場合に備えて、起動されたブラウザー インスタンスの引数を指定できるようになりました。
フォーカス モードの機能強化とバグ修正
初期のフィードバックのおかげで、Microsoft Edge DevTools 用の新しいフォーカス モード インターフェイスの改善とバグ修正を引き続き行いました。 フォーカス モードは、DevTools ウィンドウの上部または側面にツールをドッキングできる新しい UI オプションで、ツール バーからすっきりと表示されます。
フォーカス モードを使用する場合、既存の DevTools UI と同じツールとカスタム テーマをすべて使用できます。 DevTools の設定>実験でフォーカス モードの実験を有効にして、自分でフォーカス モードを試してみてください。
3D ビュー ツールでは、DevTools での色テーマの変更がサポートされます
以前のバージョンの Microsoft Edge では、DevTools でテーマを変更し、3D ビュー ツールを開くと、空白のパネルが作成されました。 この問題は、Microsoft Edge 97 で修正されました。
関連項目:
Chromium プロジェクトからのお知らせ
Microsoft Edge バージョン 97 には、Chromium プロジェクトからの次の更新プログラムも含まれています。