DevTools の新機能 (Microsoft Edge 92)

Microsoft Edge DevTools の最新機能と Microsoft Visual Studio Code および Visual Studio 用の Microsoft Edge DevTools 拡張機能を確認するには、これらのお知らせをお読みください。

最新の状態を維持し、最新の DevTools 機能を入手するには、Insiders プレビュー バージョンの Microsoft Edge をダウンロードしてください。 Windows、Linux、macOS のいずれを使用している場合でも、既定の開発ブラウザーとして Canary (または別のプレビュー チャネル) を使用することを検討してください。 Microsoft Edge のベータ版、開発版、カナリア版は、Microsoft Edge の安定したリリースバージョンと並べて、個別のアプリとして実行されます。 「Microsoft Edge Insider Channels」を参照してください。

最新のお知らせについては、 Twitter の Microsoft Edge チームに従ってください。 DevTools に関する問題を報告したり、新機能を要求したりするには、 MicrosoftEdge/DevTools リポジトリに問題を提出します。

ヒント

Microsoft Build 2021 会議は 5 月 25 日から 27 日に開催されました。 DevTools: Microsoft Edge の更新プログラムに関するビルドのビデオを次に示します 。 |プラットフォームの状態 - Microsoft Edge は、開発者向けのツールと説得力のある一貫性のあるプラットフォームをもたらします。 従来のブラウザーのサポートが終了すると、Edge は間もなく、Microsoft on Windows 10 以降でサポートされる唯一のブラウザーになります。 Edge プラットフォーム、ツール、Web アプリ全体の最新の情報については、こちらをご覧ください。

DevTools が狭い場合、[閉じる] ボタンが非表示ではなくなりました

Microsoft Edge バージョン 91 以前では、DevTools ビューポートが狭い場合、DevTools を閉じる [ 閉 じる] ボタンは表示されません。 Microsoft Edge バージョン 92 では、DevTools ビューポートの幅に関係なく、DevTools の [閉じる ] ボタンが常に表示されます。

新しい [その他のツール] ボタンを使用してツールをすばやく追加する

Microsoft Edge DevTools でさらに多くのツールを開く新しい方法があります。[ その他のツール ] (+) メニュー。 メイン パネルのツール バーとドロワー (クイック ビュー パネル) のツール バーに [その他のツール] メニューが表示されます。 [ その他 のツール] メニューからツールを選択すると、ツールがツール バーに追加されます。

いずれかのツール バーのタブを並べ替えるには、タブを選択してドラッグします。

[ その他のツール] メニューは、Microsoft Edge バージョン 89 の実験として使用でき、現在は常に存在します。

関連項目:

• [ツールの一覧について] の [その他のツール] メニュー

ホバー、選択、閉じるツールの機能強化

ツールを誤って閉じる可能性を減らすために、各ツールのタブが再フォーマットされました。 メイン ツール バーの各タブと ドロワー (クイック ビュー ) パネルのツール バーに、次のものが追加されました。

• タブの周囲の間隔。
• タブ内の閉じる (x) ボタンの周りの間隔。
• タブの上にマウス ポインターを置くときの背景色。
• タブの閉じる (x) ボタンのヒント。
• タブの閉じる (x) ボタンのコントラストが高くなります。

たとえば、 パフォーマンス ツールで [ネットワーク ] ツールのタブにカーソルを合わせると、これらの機能強化によって ネットワーク ツールが誤って閉じないようにすることができます。

再フォーマット前のタブ:

再フォーマット後のタブ:

これらの機能強化は、ローカライズされた DevTools のユーザーに特に関連します。タブが狭くなり、誤って閉じやすくなります。

閉じたツールを再追加する方が簡単になりました。メイン ツール バーとドロワー (クイック ビュー) ツール バーに [その他のツール] メニューが追加されました。

関連項目:

• ツールの一覧について

コンソールでのスクリーン リーダーのサポートの向上

Microsoft Edge バージョン 92 より前の コンソールでは、スクリーン リーダーなどの支援技術がオートコンプリートの提案や評価された式の結果を発表しませんでした。 これは現在修正されています。

コンソールで、スクリーン リーダーが現在選択されているオートコンプリートの提案を読み上げるようになりました。

コンソールで、スクリーン リーダーが評価された式の結果を読み上げるようになりました。

関連項目:

• 支援技術を使用して DevTools をナビゲートする

ソース注文ビューアー

アクセシビリティ検査を向上させるために、レンダリングされた Web ページでオーバーレイされたソース要素の順序を表示できるようになりました。

HTML ドキュメント内のコンテンツの順序は、検索エンジンの最適化とアクセシビリティにとって重要です。 CSS を使用すると、開発者は、HTML ソース ドキュメントの順序とは異なる画面上の順序で見えるコンテンツを作成できます。 スクリーン リーダー ユーザーが混乱する可能性があるため、これはアクセシビリティの問題です。

ソース注文ビューアーを使用したキーボードサポートのテストに関するページを参照してください。

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1094406」を参照してください。

[ネットワーク条件] タブでデバイスのクライアント ヒントを User-Agent する

User-Agent クライアント ヒントが、[ネットワーク条件] ツールの [ユーザー エージェント] フィールドのデバイスに適用されるようになりました。 User-Agent クライアント ヒントは、プライバシーを保持する人間工学に基づいた方法でユーザーのブラウザーに関する情報にアクセスできるようにする、クライアント ヒント API の新しい拡張です。

「ユーザー エージェント クライアント ヒント」を参照してください。

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1174299」を参照してください。

Microsoft Edge Developer Tools for Visual Studio Code バージョン 1.1.8

Microsoft Edge Developer Tools for Visual Studio Code 拡張機能バージョン 1.1.8 for Microsoft Visual Studio Code には、以前のリリース以降、次の変更があります。 Microsoft Visual Studio Code では、拡張機能が自動的に更新されます。 バージョン 1.1.8 に手動で更新するには、「 拡張機能を手動で更新する」を参照してください。

問題をファイルし、 vscode-edge-devtools GitHub リポジトリで拡張機能に貢献できます。

DevTools 拡張機能を簡単に使用できるようにするためのコンテキスト内ドキュメントと UI

バージョン 1.1.8 の Microsoft Edge Developer Tools for Visual Studio Code 拡張機能では、Microsoft Edge の新しいインスタンスを開始するためのより簡単な方法が提供されるようになりました。手順、ボタン、リンク、およびガイドとなるドキュメント ページを示します。

• Visual Studio Code のアクティビティ バーで [Microsoft Edge ツール] ボタンを選択すると、[Microsoft Edge ツール: ターゲット] パネルに、説明テキスト、ボタン、リンクが表示され、空白のパネルではなく、ガイドが表示されるようになりました。

• Visual Studio Code 内から Microsoft Edge の新しいインスタンスを開くと、Microsoft Edge に、空白のページではなく、開発者ツール拡張機能を使用する方法を説明するスタート ページが表示されるようになりました。

• [Microsoft Edge ツール: ターゲット] パネルに [launch.jsonの生成] ボタンと手順が表示され、Microsoft Edge でデバッグのためにプロジェクトを起動するのに役立ちます。

関連項目:

• Visual Studio Code 用 Microsoft Edge DevTools 拡張機能

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

次のセクションでは、オープンソースの Chromium プロジェクトに貢献した Microsoft Edge で利用可能な追加機能について説明します。

CSS グリッド エディター

新しい CSS グリッド エディターを使用して、CSS グリッド レイアウトをプレビューおよび作成できるようになりました。

ページ上の HTML 要素に display: grid または display: inline-grid が適用されている場合、[ スタイル ] タブの横にグリッド アイコンが表示されます。グリッド アイコンをクリックして CSS グリッド エディターを表示または非表示にします。 CSS グリッド エディターで、いずれかのアイコン ( justify-content: space-aroundなど) を選択して、レンダリングされたページのレイアウトをプレビューします。 Flex レイアウトも同様に機能します。

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1203241」を参照してください。

関連項目:

• CSS グリッドを検査する

コンソールでの const 再宣言のサポート

コンソールでは、既存のletとclass再宣言に加えて、(コンソールでステートメントを実行する場合など) 別の REPL スクリプト間でconst変数の再宣言がサポートされるようになりました。 このサポートにより、ページを更新せずに、 const 変数のさまざまな宣言を試すことができます。 以前は、 const バインドを再宣言した場合、DevTools は構文エラーをスローしました。

以下の例を参照してください。 const reeclaration は、個別の REPL スクリプトでサポートされています (変数 aを参照)。 次のシナリオは、設計上サポートされていないことに注意してください。

• const REPL スクリプトでは、ページ スクリプトの再宣言は許可されません。
• const 同じ REPL スクリプト内での再宣言は許可されません (変数 bを参照してください)。

1 つの REPL スクリプトまたは複数行 REPL スクリプトを実行する方法については、「 コンソールで JavaScript を実行する」を参照してください。

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1076427」を参照してください。

iframe の詳細を表示するための新しいショートカット

iframeの詳細をすばやく表示するには、[要素] ツールでiframe要素を右クリックし、[iframe の詳細を表示] を選択します。

これにより、アプリケーション ツールのiframeに関する詳細が表示されます。 アプリケーション ツールでは、ドキュメントの詳細、セキュリティと分離の状態、アクセス許可ポリシーなどを調べて、潜在的な問題をデバッグできます。

関連項目:

• ストレージを管理するためのアプリケーション ツール
• 要素ツールを使用して HTML と CSS を検査、編集、デバッグする

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1192084」を参照してください。

CORS デバッグのサポートの強化

クロスオリジン リソース共有 (CORS) エラーが Issue ツールに表示されるようになりました。 CORS エラーにはさまざまな潜在的な原因があります。 各問題をクリックして展開し、潜在的な原因と解決策を確認します。

関連項目:

• DevTools の新機能 (Microsoft Edge 88) のネットワーク ツールで CORS エラーを報告する
• 問題ツールを使用して問題を見つけて修正する

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1141824」を参照してください。

XHR フィルターの名前を Fetch/XHR に変更しました

ネットワーク ツールで、XHR フィルターの名前が Fetch/XHR に変更されました。 この変更により、このフィルターに XMLHttpRequest と Fetch API ネットワーク要求の両方が含まれていることが明確になります。

関連項目:

• ネットワーク アクティビティを検査する
• XMLHttpRequest 仕様
• フェッチ スペック

Chromium オープンソース プロジェクトのこの機能の履歴については、「Issue 1201398」を参照してください。

ネットワーク ツールで Wasm リソースの種類をフィルター処理する

ネットワーク ツールで、新しい Wasm フィルターを選択して WebAssembly ネットワーク要求をフィルター処理できるようになりました。

関連項目:

• ネットワーク アクティビティの検査でリソースをフィルター処理する

Chromium オープンソース プロジェクトでのこの機能の履歴については、「Issue 1103638」を参照してください。

コンピューティング交差がパフォーマンス ツールに含まれるようになりました

パフォーマンス ツールで、DevTools で炎のグラフにコンピューティング交差が表示されるようになりました。 これらの変更は、交差オブザーバー イベントを識別し、交差オブザーバーの潜在的なパフォーマンス オーバーヘッドをデバッグするのに役立ちます。

関連項目:

• 信頼は良い、観察は良い:交差オブザーバーv2
• パフォーマンス記録を分析する

Chromium オープンソース プロジェクトでのこの機能の履歴については、「Issue 1199137」を参照してください。

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページはこちらにあり、Jecelyn Yeen (開発者アドボケイト、Chrome DevTools) によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。