DevTools の新機能 (Microsoft Edge 111)

これらは、Microsoft Edge の Stable リリースの最新の DevTools 機能です。

ビデオ: DevTools 111 の新機能

ビデオ「DevTools 111 の新機能」のサムネイル画像

HoloLens 2 デバイスでの Microsoft Edge、PWA、WebView2 コントロールのリモート デバッグ

Microsoft Edge 用リモート ツール アプリが HoloLens 2 デバイスで使用できるようになりました。 Microsoft Edge 用リモート ツール アプリは、デスクトップ用 Windows デバイス ポータル用のプラグインであり、Microsoft Edge、Progressive Web Apps (PWA)、WebView2 コントロールのタブのリモート デバッグを可能にします。 リモート デバッグを使用すると、リモート デバイスで Web コンテンツを実行し、開発用コンピューターから直接デバッグできます。

Microsoft Store の Microsoft Edge アプリ用リモート ツール

リモート デバッグを有効にすると、HoloLens 2 デバイスで DevTools を開く必要はなくなりました。 代わりに、デバイス ポータルを使用してリモート HoloLens 2 デバイスに接続し、edge://inspect ページを開き、DevTools で使用するターゲット (タブ、PWA、または WebView2 コントロール) を選択できます。

Microsoft Edge のリモート デバッグ フローに関するフィードバックを送信するには、問題 136 にコメントを残してください: HoloLens 2 デバイスのリモート デバッグは、最新バージョンの Microsoft Edge 用リモート ツール アプリで利用できるようになりました。

関連項目:

デバイス モード ツール バーには、テーマとビジョンの欠陥に対するエミュレーション コントロールがあります

以前のバージョンの Microsoft Edge では、さまざまなテーマや視覚障碍をエミュレートするために、 レンダリング ツールを使用して、たとえば、ユーザーが色を認識できない色覚をエミュレートします。

Microsoft Edge 111 では、レンダリング ツールを使用するだけでなく、デバイス モード ツール バーからこれらのテーマと視覚障碍エミュレーション コントロールに直接アクセスできるようになりました。

たとえば、ハイ コントラスト モードをエミュレートし、Web コンテンツの応答をテストするには、次のようにします。

  1. [デバイス モード] ツールバーの [調整] ドロップダウン リストの右側で、[メディア機能のエミュレート] ([スポイト] アイコン、[スポイト] アイコン) をクリックします。
  2. Select forced-colors: active:

デバイス モード ツールバーからハイ コントラスト モードを直接エミュレートする

また、スポイト アイコンの横にある目のアイコンをクリックして、視覚障碍をエミュレートすることもできます。 たとえば、かすみ目をエミュレートするには:

  1. [ 視力欠陥のエミュレート ] (目のアイコン、 目のアイコン) をクリックします。
  2. [かすみ目] を選択する:

デバイス モード ツール バーからかすみ目を直接エミュレートする

関連項目:

パフォーマンス ツールにより、運用コードのプロファイリング時にファイル名と関数名の最小化が解除される

Microsoft Edge 99 では、Unminify と呼ばれる新しい機能がパフォーマンス ツールに追加されました。 この 縮小解除 機能は、 パフォーマンス ツールで記録されたプロファイルにソースマップを適用し、縮小されていないプロファイルをコンピューターにダウンロードしました。 縮小解除機能については、「DevTools の新機能 (Microsoft Edge 99)」のパフォーマンス プロファイルにソース マップを使用して元の関数名を表示する」で説明されています。

Microsoft Edge 111 では、ソース マップが読み込まれている限り、運用コードのプロファイリング中にパフォーマンス ツールによって元のファイル名と関数名が自動的に提供されるようになったため、この機能は削除されました。 ソース マップは、Azure 成果物シンボル サーバーでホストすることで、確実かつ安全に読み込むことができます。

次の図では、運用コードをプロファイリングするときにフレーム グラフに縮小された関数名が表示されます。

フレーム グラフの関数名の縮小

Microsoft Edge 111 では、運用コードをプロファイリングするときに、 パフォーマンス ツールによってフレーム グラフ内の関数名が自動的に最小化解除されます。

フレーム グラフ内の最小化されていない関数名

関連項目:

フォーカス モードで [スタイル] ウィンドウが使いやすくなった

以前のバージョンの Microsoft Edge の フォーカス モードでは、[ 要素 ] ツールを使用すれば、[ スタイル ] ウィンドウ内のすべてのタブに簡単にアクセスできませんでした。 Microsoft Edge 111 では、この問題が修正されています。 [ スタイル] ウィンドウのビューポートが狭く、他の使用可能なタブをすべて表示できない場合は、[ その他のタブ] 展開機能アイコン (その他のタブ展開機能アイコン) をクリックします。

フォーカス モードの [スタイル] ウィンドウで折りたたまれたタブセット

[ スタイル] ウィンドウ内の一部のタブのみを表示するには、[ その他のタブ折 りたたみアイコン] (その他のタブ折りたたみアイコン) をクリックします。

フォーカス モードの [スタイル] ウィンドウの展開されたタブセット

関連項目:

パフォーマンス ツールから Excel にセレクター統計テーブルをコピーする

Microsoft Edge 109 では、パフォーマンス ツールにセレクター統計機能が導入されました。 パフォーマンス ツールで [高度なレンダリング インストルメンテーションを有効にする (低速)] 設定を有効にしている状態で、フレーム グラフで任意の Recalculate Styles イベントを選択すると、下部ペインに [Selector Stats] タブが追加されます。 「DevTools の新機能 (Microsoft Edge 109)」の「実行時間の長い再計算スタイル イベントを新しいセレクター統計でデバッグする」を参照してください。

Microsoft Edge 111 では、各 Recalculate Styles イベントのセレクター統計テーブルを Microsoft Excel ブックにエクスポートできるようになりました。 その後、Excel を使用してセレクターのパフォーマンス分析を集計し、プロファイルの有効期間にわたって最もコストのかかるセレクターを特定できます。

セレクター統計テーブルをエクスポートするには:

  1. 左上のセルをマウスでクリックし、ドラッグして右下のセルまで選択します。
  2. テーブルを右クリックし、[ コピー] を選択します。 または、Ctrl+C (Windows、Linux) または Command + C (macOS) を押します。
  3. 表を Excel に貼り付けます。

コピーと貼り付け用のセレクター統計テーブル全体を選択する

関連項目:

フォーカス モードでは、ツールをクイック ビューに移動すると支援技術が通知します

以前のバージョンの Microsoft Edge では、スクリーン リーダーなどの支援技術は、ツールを アクティビティ バー から クイック ビュー ツール バーに移動しても、確認をアナウンスしませんでした。 Microsoft Edge 111 では、この問題が修正されています。 ネットワーク ツールをアクティビティ バーからクイック ビュー ツール バーに移動すると、スクリーン リーダーで「クイック ビューにネットワークが正常に追加されました」と読み上げられるようになりました。

ネットワーク ツールをアクティビティ バーからクイック ビュー ツールバーに移動する

関連項目:

Chromium プロジェクトからのお知らせ

Microsoft Edge 111 には、Chromium プロジェクトからの次の更新プログラムも含まれています。

関連項目

  • 最終更新: