DevTools の新機能 (Microsoft Edge 83)

更新された Chromium のスケジュールに続いて、今後の Microsoft Edge リリースのスケジュールを調整し、Microsoft Edge 82 リリースをキャンセルしています。 詳細については、 ブログ投稿 をご覧ください。

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

Microsoft Edge DevTools チームからのお知らせ

Windows 10 以降のデバイスで Microsoft Edge をリモートでデバッグする

Microsoft Edge アプリ用のリモート ツールがMicrosoft Store で利用できるようになりました。 このアプリは、 Windows デバイス ポータルを拡張します。 開発マシンで実行されている Microsoft Edge からリモート Windows 10 以降のデバイスに接続し、ターゲットの一覧を表示できます。 このターゲットの一覧には、Windows デバイスで開いている Microsoft Edge と PWA のすべてのタブが含まれています。 リモート Windows デバイスで実行されているターゲットに対して開発用コンピューター上の DevTools を使用します。

リモート デバッグ用に Windows 10 デバイスと開発マシンを設定する方法については、「Windows デバイスをリモートでデバッグする」を参照してください。

リモート デバッグに関するご経験について、 ツイート するか、[ フィードバックの送信 ] アイコンをクリックしてお知らせください。

設定にアクセスする新しい方法

DevTools にはたくさんの設定があり、必要に応じて DevTools の外観、操作性、動作にカスタマイズできます。 Microsoft Edge 83 では、DevTools の設定へのアクセス がはるかに簡単になりました。 [本体の警告] とメイン メニューの横にある歯車アイコンをクリックして、[ 設定 ] を開きます。

[その他のツール] の [メイン メニュー] から [設定] を開くこともできます。

Chromium問題 #1050855

新しく改善された情報バー

DevTools の情報通知バー (情報バー) の外観が向上し、機能が向上します。 Microsoft Edge 83 では、情報バーが読みやすくなり、ボタンが表示されるようになったため、関連するアクションをすぐに実行できます。

Chromium問題 #1056348

キーボードでカラー ピッカー内を移動する

以前のバージョンの Microsoft Edge では、キーボードを使用してカラー ピッカーの [網掛け] セクションを移動することはできませんでした。 Microsoft Edge 83 では、キーボードを使用してカラー ピッカーの [ 網掛け ] セクションでセレクターを移動できるようになりました。

カラー ピッカーは、color宣言と宣言を変更するための [要素] パネルbackground-color GUI です。

Chromium問題 #963183

関連項目:

• 要素ツールを使用して HTML と CSS を検査、編集、デバッグする

ページの更新後に [プロパティ] タブが設定されるようになりました

Microsoft Edge 81 以前では、ページの更新により [要素] パネルの [プロパティ] タブが壊れていました。 ページを更新したときに、[ プロパティ] タブ に現在選択されている要素のプロパティが表示されませんでした。

Microsoft Edge 83 では、[ プロパティ] タブでページ更新後に、現在選択されている要素のプロパティを表示できるようになりました。

Chromium問題 #1050999

関連項目:

• 要素ツールを使用して HTML と CSS を検査、編集、デバッグする

方向キーを使用して、[変更] ツールでスクロールする

変更ツールは、DevTools で CSS または JavaScript に加えた変更を追跡します。 変更ツールを使用すると、すべての変更をすばやく表示し、それらをエディター/IDE に持ち帰ることができます。

変更ツールを開くには、DevTools で Ctrl+Shift+P (Windows/Linux) または Command+Shift+P (macOS) を押してコマンド メニューを開き、「changes」と入力します。 [ 変更の表示] コマンドを選択し、 Enter キーを押します。 変更 ツール が DevTools の下部にある クイック ビュー パネルで開きます。

縮小ファイルに変更を加えた場合、[ 変更] ツール を使用すると、水平方向にスクロールしてすべての縮小コードを表示できます。 Microsoft Edge 83 以降、キーボードの方向キーを使用して水平方向にスクロールできるようになりました。

スクリーン リーダーまたはキーボードを使用して DevTools 内を移動する場合は、 ツイートするか 、[ フィードバックの送信 ] アイコンをクリックしてフィードバックをお寄せください。

Chromium問題 #963183

関連項目:

• [変更] ツールを使用してファイルの変更を追跡する

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

次のセクションでは、オープンソース Chromium プロジェクトに提供された、Microsoft Edge 83 で利用できるその他の機能について説明します。

視覚障碍をエミュレートする

レンダリング ツールで、新しい視覚欠陥のエミュレート機能を使用して、さまざまな種類の視覚障碍を持つユーザーがサイトをどのように経験しているかをよりよく理解します。

DevTools は、かすみ目と次の種類の色覚異常をエミュレートできます。

これらの色覚異常のそれほど極端ではないバージョンが存在し、より一般的です。 たとえば、赤色覚異常は、赤色光に対する感受性の低下です(赤色光を完全に知覚できない赤色覚異常とは対照的です)。 ただし、これらの 視覚 障害は明確に定義されていません:そのような視覚障害を持つすべての人は異なり、物事を異なって見る場合があります(関連する色の多かれ少なかれ知覚できる)。

DevTools でより極端なシミュレーション用に設計することで、視覚に障碍のあるユーザーも Web アプリにアクセスできることが保証されます。

ツイートするか、[フィードバックの送信] アイコンをクリックして、フィードバックを送信してください。

Chromium の問題 #1003700

関連項目:

• 視覚障碍をエミュレートする
• パフォーマンス機能リファレンスでレンダリング ツールを使用してレンダリング パフォーマンスを分析する
• 色覚異常の種類、Colourblindawareness.org。

ロケールのエミュレート

ロケールをエミュレートするには、 センサー ツールで、[ 場所 ] ドロップダウン リストから場所を選択します。 (センサー ツールにアクセスするには、コマンド メニューを開いて「Sensors」と入力します。)場所を選択すると、DevTools によって現在の既定のロケールが変更され、次のコードに影響します。

• Intl.* API の例: new Intl.NumberFormat().resolvedOptions().locale
• String.prototype.localeCompare や *.prototype.toLocaleString などの他のロケール対応 JavaScript API。次に例を示します。123_456..toLocaleString()
• navigator.languageやnavigator.languages
• Accept-Language HTTP 要求ヘッダー

デモを試すには、「 ロケールに依存するコード例」を参照してください。

Chromium問題 #1051822

関連項目:

• デバイス センサーをエミュレートするで位置情報をオーバーライドします。

Cross-Origin Embedder Policy (COEP) のデバッグ

[ ネットワーク ] パネルに、 クロスオリジン埋め込みポリシー のデバッグ情報が提供されるようになりました。

[ 状態] 列には、要求がブロックされた理由の簡単な説明と、さらにデバッグするためにその要求のヘッダーを表示するためのリンクが表示されるようになりました。

[ヘッダー] タブの [応答ヘッダー] セクションには、問題を解決する方法に関する詳細なガイダンスが表示されます。

ツイートするか、[フィードバックの送信] アイコンをクリックして、フィードバックを送信してください。

Chromium問題 #1051466

関連項目:

• [ネットワーク アクティビティの検査] で要求をブロックします。

ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン

更新: 2022 年の時点で、ブレークポイントは赤い円ではなく青い四角形で示されるようになりました。

[ ソース] パネルには、ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコンがあります。

• ブレークポイント () は赤い円で表されます。
• 条件付きブレークポイント (円) は、半分赤半分白の円で表されます。
• ログポイント () は、コンソール アイコンの付いた赤い円で表されます。

新しいアイコンの動機は、UI を他の GUI デバッグ ツール (通常はブレークポイントが赤で色付けされる) との一貫性を高め、3 つの機能を一目で区別しやすくするためでした。

Chromium問題 #1041830

関連項目:

• ブレークポイントを使用してコードを一時停止する

特定の Cookie パスを設定するネットワーク要求を表示する

ネットワーク ツールの新しい cookie-path フィルター キーワード (keyword)を使用して、特定の Cookie パスを設定するネットワーク要求に注目します。

cookie-path などのキーワードについては、「ネットワーク機能リファレンス」の「プロパティで要求をフィルター処理する」を参照してください。

コマンド メニューから左にドッキングする

DevTools をビューポート (レンダリングされた Web ページ) の左側に移動するには、 コマンド メニュー を開き、 Dock to left コマンドを実行します。 左 にドッキング機能 は Microsoft Edge 75 以降で利用できましたが、以前はメイン メニューからのみアクセスできました。 コマンド メニューからも [左にドッキング] 機能にアクセスできるようになりました。

」

ツイートするか、[フィードバックの送信] アイコンをクリックして、フィードバックを送信してください。

Chromium問題 #1011679

関連項目:

• DevTools の配置の変更 (装着解除、下にドッキング、左にドッキング)

[監査] パネルが Lighthouse パネルになりました

DevTools チームは、DevTools から Lighthouse を実行することは可能ではあるものの、試してみたところ "Lighthouse" パネルが見つからなかったというフィードバックを Web 開発者から頻繁に受け取りました。 そのため、 監査 パネルは ライトハウス パネルと呼ばれるようになりました。

注: Lighthouse パネルには、サードパーティの Web サイトでホストされているコンテンツへのリンクが用意されています。 Microsoft は、これらのサイトのコンテンツおよびそれらのサイトが収集する可能性のあるデータに対して責任を負わず、管理もできません。

関連項目:

• ライトハウス ツール

フォルダー内のすべてのローカル オーバーライドを削除する

ローカル オーバーライドを設定した後、ディレクトリを右クリックし、新しい [すべてのオーバーライドを削除] オプションを選択して、そのフォルダー内のすべてのローカル オーバーライドを削除できます。

ツイートするか、[フィードバックの送信] アイコンをクリックして、フィードバックを送信してください。

Chromium問題 #1016501

関連項目:

• ローカル コピーで Web ページ リソースを上書きする ([上書き] タブ)

長いタスクの UI を更新

Long Task は、メイン スレッドを長時間独占し、Web ページをフリーズさせる JavaScript コードです。

以前から [パフォーマンス] パネルで長時間タスクを視覚化することができましたが、Microsoft Edge 83 では、パフォーマンス ツールの長時間タスク視覚化 UI が更新されました。 タスクの長いタスク部分が、縞模様の赤い背景で色付けされるようになりました。

ツイートするか、[フィードバックの送信] アイコンをクリックして、フィードバックを送信してください。

Chromium問題 #1054447

マニフェスト ウィンドウでのマスク可能なアイコンのサポート

アプリケーション ツールのマニフェスト ペインに、新しいチェックボックス [マスク可能なアイコンの最小セーフ領域のみを表示する] が追加されました。

Android Oreo では、さまざまなデバイス モデル間でアプリ アイコンをさまざまな図形で表示するアダプティブ アイコンが導入されました。 マスク可能なアイコン は、アダプティブ アイコンをサポートする新しいアイコン形式です。これにより、マスク可能なアイコン標準をサポートするデバイスで PWA アイコンを適切に表示できます。

Android Oreo デバイスでマスク可能なアイコンが適切に表示されることをチェックするには、アプリケーション ツールのマニフェスト ペインで、新しいチェックボックス [マスク可能なアイコンの最小安全領域のみを表示する] をオンにします。

この機能は Microsoft Edge 81 で開始されました。 Microsoft Edge 83 で説明されている更新プログラムについては、「 DevTools の新機能 (Microsoft Edge 81)」では説明されていません。

関連項目:

• Cookie の表示、編集、削除 - アプリケーション ツールに関する記事。

この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

関連項目

• Microsoft Edge DevTools の新機能
• Microsoft Edge Web プラットフォームのリリース ノート