DevTools の新機能 (Microsoft Edge 91)

  • [アーティクル]

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 リポジトリに問題を提出します。

波線の下線は、要素ツールのコードの問題と改善を強調します

ほとんどの最新の IDE では、テキストの下の波状の下線は構文エラーを示します。 Microsoft Edge バージョン 91 以降では、要素ツールの DOM ビューの HTML の下に波線の下線が表示されます。 波線の下線は、アクセシビリティ、互換性、パフォーマンスなどに関連するコードの問題と提案を示しています。

問題ツールを開き、 問題 とその解決方法の詳細を確認するには:

  • Shift キーを押しながら波線の下線をクリックします。

  • または、波状の下線を右クリックし、[ 問題に表示] を選択します。

[要素] ツールで下線付きエラーを選択します。

要素ツールで下線付きエラーを選択する

問題ツールでのエラーの詳細の表示:

問題ツールでのエラーの詳細の表示

関連項目:

情報に関するヒントを使用して DevTools について学習する

DevTools ツールヒント機能は、さまざまなツールとウィンドウについて学習するのに役立ちます。 DevTools のアウトラインされた各リージョンにカーソルを合わせると、ツールの使用方法の詳細が表示されます。 ツールヒントを有効にするには、次のいずれかの操作を行います。

  • [ DevTools のカスタマイズと制御 (...) >ヘルプ>] [DevTools ツールヒントの切り替え] の順に選択します。
  • Ctrl + Shift + H (Windows、Linux) または Command + Shift + H (macOS) を押します。
  • コマンド メニューを開 き、 ヒントを入力します。

次に、DevTools のアウトラインされた各リージョンにカーソルを合わせます。

DevTools ツールヒント モード

ヒントをオフにするには、 Esc キーを押します。

更新: この機能はリリースされ、試験的ではありません。

注: 2022 年 5 月の時点では、 アクティビティ バーからヒントはサポートされていません。

サービス ワーカー更新プログラムのタイムライン

Microsoft Edge バージョン 91 以降では、プログレッシブ Web アプリまたは Service Worker 開発者の場合は、アプリケーション ツールで Service Worker の更新ライフサイクルをタイムラインとして表示します。 この機能は、Service Worker が次の各段階で費やす時間を理解するのに役立ちます。

  • インストール
  • Wait
  • Activate

Service Worker の更新サイクルでタイムラインを表示する

Chromium オープン ソース プロジェクトでのこの機能のリアルタイム更新については、「Issue 1066604」を参照してください。

関連項目:

プログレッシブ Web Appsに四角形以外のアイコンの警告が表示されなくなりました

Microsoft Edge バージョン 90 以前では、PWA の Web アプリ マニフェストに四角形以外のアイコンが含まれている場合は、四角形以外のアイコンごとに [エラーと警告] セクションに警告が表示されました。 Microsoft Edge バージョン 91 以降では、少なくとも 1 つの正方形のアイコンを指定すると、アプリケーション ツールの [マニフェスト] セクションに警告が表示されません。 正方形のアイコンを指定しない場合は、次の警告メッセージが表示されます。

Most operating systems require square icons.  Please include at least one square icon in the array.

Microsoft Edge バージョン 90 以前では、四角形以外のアイコンごとにエラーが表示されます。

Microsoft Edge バージョン 90 以前では、四角形以外のアイコンごとにエラーが表示されます

Microsoft Edge バージョン 91 以降では、少なくとも 1 つの正方形のアイコンを指定してもエラーは表示されません。

Microsoft Edge バージョン 91 以降では、1 つ以上の正方形のアイコンを指定してもエラーは表示されません

Web アプリ マニフェストでエラーと警告を表示するには、[アプリケーション ツール>] [アプリケーション] セクション >[マニフェスト] を選択します。 [エラーと警告] 見出しの下に エラーと警告 が表示されます。

Chromium オープンソース プロジェクトのこの機能のリアルタイム更新については、「Issue 1185945」を参照してください。

関連項目:

ローカライズされた DevTools が、Chromium ベースのブラウザーでサポートされるようになりました

Microsoft Edge バージョン 81 以降では、Microsoft Edge DevTools UI が独自の言語で表示されます。 多くの開発者は、StackOverflow や Visual Studio Code などの開発者ツールをネイティブ言語で使用します。 同様の UI 言語の柔軟性を提供するために、Microsoft Edge DevTools チーム、Chrome DevTools チーム、Google Lighthouse チームが共同作業を行い、すべてのChromium ベースのブラウザーで同じエクスペリエンスを提供しました。

Microsoft Edge ブラウザーと DevTools が日本語に設定されている

「DevTools 言語設定を変更する」を参照してください。

Chromium オープンソース プロジェクトのこの機能に関するコラボレーションの詳細については、「Issue 1136655」を参照してください。

キーボードを使用して CSS 変数に移動する

Microsoft Edge バージョン 88 以降の [スタイル] ウィンドウには CSS 変数が表示され、各変数の定義へのリンクが直接提供されます。 Microsoft Edge バージョン 91 以降では、方向キーを使用して CSS 変数に簡単に移動できます。 [ スタイル ] ウィンドウで定義を開くには、変数をポイントして Enter キーを押します。

[スタイル] ウィンドウで強調表示されている '--theme-body-background' CSS 変数

Chromium オープンソース プロジェクトでのこの機能のリアルタイム更新については、「Issue 1187735」を参照してください。

関連項目:

問題は重大度によって自動的に並べ替えられます

Issue ツールには、アクセシビリティ、パフォーマンス、セキュリティなど、Web サイトを改善するための推奨事項が表示されます。 ユーザーからのフィードバックに基づいて、問題が重大度で自動的に並べ替えられるようになりました。 各フィードバック カテゴリでは、 エラー としてマークされた各問題が最初に表示され、次に 警告としてマークされた各問題の後に、各問題が ヒントとしてマークされます。

問題ツールには、重大度で並べ替えられた問題が表示されます

関連項目:

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

Microsoft Edge Tools for Visual Studio Code 拡張機能バージョン 1.1.7 には、Microsoft Edge バージョン 88 の DevTools が用意されています。 この拡張機能は ARM デバイスをサポートし、Microsoft Edge 拡張機能のデバッガーに依存しなくなりました。

バージョン 1.1.7 には、次のバグ修正と機能強化が含まれています。

  • ターゲットクロージャの信頼性を更新しました。

  • サイド パネルが更新され、作成または破棄されたターゲットをデバッグするときに自動的に更新されます。

  • 拡張機能の設定と最新の変更履歴にすばやくアクセスできる新しい右クリック メニューを追加しました。

  • 最新の機能を含む拡張機能ドキュメントのリリースを更新し、簡略化しました。

バージョン 1.1.7 に手動で更新するには、「 拡張機能を手動で更新する」を参照してください。 問題をファイルし、 vscode-edge-devtools GitHub リポジトリで拡張機能に貢献できます。

関連項目:

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

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

CSS スクロール スナップを視覚化する

[要素] ツールで、バッジをscroll-snap切り替えて CSS スクロール スナップの配置を検査できるようになりました。 Web ページ上の HTML 要素が scroll-snap-type 適用されると、 scroll-snap その横に [ 要素] ツールにバッジが表示されます。 バッジを scroll-snap クリックして、Web ページにスクロール スナップ オーバーレイを表示することを切り替えます。

Web ページの例については、「 スクロール スナップ デモ」を参照してください。 この例では、スナップ エッジにドットが表示されます。 スクロール ポートにはソリッド アウトラインがあり、スナップ項目には破線のアウトラインがあります。 スクロールパディングは緑で塗りつぶされ、スクロールマージンはオレンジ色で塗りつぶされています。

CSS scroll-snap

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

関連項目:

新しいメモリ インスペクター ツール

新しい メモリ インスペクター ツールを使用して、JavaScript と Wasm メモリ内の を ArrayBuffer 検査します。

メモリ インスペクター ツール

参照:

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

[要素] ツールの [新しいバッジ設定] ウィンドウ

次に、要素ツールのバッジ設定を使用して、個々のバッジをオン(またはオフ)にします。 この機能を使用して、Web ページを検査する際に重要なバッジをカスタマイズして集中できます。

  1. 要素を右クリックし、[ バッジの設定] をクリックします。 [ 要素 ] ツールの上部にバッジ設定ウィンドウが開きます。

    [要素] ツールの [バッジ設定] ウィンドウ

  2. バッジを表示 (または非表示) するには、バッジ名の横にあるチェック ボックスをオン (またはオフ) にします。

関連項目:

縦横比情報を使用した拡張画像プレビュー

要素ツールでは、画像プレビューが強化され、次の詳細など、詳細情報が表示されます。

  • レンダリングされたサイズ
  • レンダリングされた縦横比
  • 組み込みサイズ
  • 組み込みの縦横比
  • ファイルのサイズ

要素ツールの縦横比情報を含む画像プレビュー

この情報は、画像の理解と最適化の適用に役立ちます。 画像の縦横比情報は、画像であるページ リソースをクリックすると、 ネットワーク ツールでも使用できます。

ネットワーク ツールの画像縦横比情報

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

関連項目:

ネットワーク条件ツールでコンテンツ エンコードを構成するための新しいオプション

[ネットワーク] ツールで、[調整] ドロップダウン メニューの横にある新しい [その他のネットワーク条件]ボタンをクリックして、[ネットワーク条件] ツールを開きます。 gzip、brotli、または別の将来Content-Encodingをサポートしていないブラウザーに対してサーバー応答が正しくエンコードされているかどうかをテストするには:

  1. [ネットワーク条件] ツールを開きます。

  2. [Accepted Content-Encodings]\(受け入れられたコンテンツ エンコード\) に移動します。

  3. テストするの横にある Content-Encoding チェック ボックスをオフにします。

ネットワーク ツールの [その他のネットワーク条件] ボタンをクリックすると、[ネットワーク条件] ツールが開き、

関連項目:

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

スタイル ウィンドウの機能強化

[スタイル] ウィンドウに計算値を表示するための新しいショートカット

次に、[要素] ツールの [スタイル] タブに計算された CSS 値を表示します。

  1. CSS プロパティを右クリックし、[ 計算値の表示] を選択します。

    計算値を表示するための新しいショートカット

関連項目:

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

アクセントカラーキーワード (keyword)のサポート

[スタイル] ウィンドウのオートコンプリート UI で CSS キーワード (keyword)が検出accent-colorされるようになりました。これにより、要素によって生成される UI コントロールのアクセントカラーを指定できるようになりました。 要素によって生成される UI コントロールの例には、チェック ボックスまたはラジオ ボタンがあります。

'アクセントカラー' CSS キーワード (keyword)

Chromium実装の状態の詳細については、「機能: アクセントカラー CSS プロパティ」を参照してください。 この機能を有効にするには、 に edge://flags#enable-experimental-web-platform-features 移動し、チェックボックスを [有効] に設定します。

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

関連項目:

[フレームの詳細] ビューにブロックされた機能の詳細を表示する

アクセス許可ポリシーは、Web サイトに、個々のフレームまたは埋め込み内のブラウザー機能の使用を許可またはブロックする機能を iframe 提供する Web プラットフォーム API です。 機能がブロックされる理由の詳細を表示するには:

  1. OOPIF アクセス許可ポリシーに移動します。
  2. アプリケーション ツールを開きます。
  3. フレームをクリックします。
  4. [アクセス許可ポリシー] セクションに移動します。
  5. [無効な機能] プロパティを見つけます。
  6. [ 詳細の表示] をクリックします。
  7. 各ポリシーの横にあるアイコンをクリックして、機能をブロックした iframe またはネットワーク要求に移動します。

[フレームの詳細] ビューでブロックされた機能

関連項目:

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

[実験] 設定で実験をフィルター処理する

新しい実験フィルターを使用して、実験をより迅速に見つけます。 たとえば、コードの問題に対して新しい実験を有効にするには、次のようにします。

  1. DevTools で、[設定] ([設定] アイコン) > [実験] を選択します。

  2. [ フィルター ] テキスト ボックスで、入力の 問題を開始します。

[実験] 設定で実験をフィルター処理する

関連項目:

[キャッシュ ストレージ] ウィンドウの [新しい Vary Header] 列

アプリケーション ツールの [キャッシュ ストレージ] ウィンドウで、新しいVary Header列を使用して HTTP 応答ヘッダーの値をVary表示します。

Vary ヘッダー列

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

関連項目:

ソース ツールの機能強化

新しい JavaScript 機能のサポート

DevTools では、新しい プライベート ブランドチェック がサポートされるようになりました。 #foo in obj JavaScript 言語機能。 プライベート ブランド チェック機能は、オペレーターをin拡張して、特定のオブジェクトのプライベート (#) クラス フィールドをサポートします。 コンソールツールとソースツールで試してみてください。

プライベート フィールドを検査するには:

  1. [ソース] ツールで、デバッガー ウィンドウに移動します。
  2. [スコープ] セクションを展開します。

JavaScript プライベート ブランドのチェック

関連項目:

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

ブレークポイントのデバッグのサポートの強化

Microsoft Edge バージョン 90 以前では、DevTools は 1 つのバンドルにブレークポイントのみを設定します。 Microsoft Edge バージョン 91 以降では、共有コンポーネントをデバッグするときに、DevTools は複数のバンドルにブレークポイントを適切に設定します。

Webpack やロールアップなどの最新の JavaScript バンドルでは、コードをバンドルに分割できます。 「 コード分割」を参照してください。

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

関連項目:

角かっこ表記によるホバー プレビューのサポート

Sources ツールで、表記を使用する JavaScript メンバー式のホバー プレビューが[]サポートされるようになりました。

[] 表記によるホバー プレビューのサポート

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

関連項目:

HTML ファイルのアウトラインの改善

DevTools では、ファイルのサポートの .html 概要が改善されました。 [ソース] ツールで、ファイルを.html開きます。 コード アウトラインをオン (またはオフ) にするには、Windows/Linux で Ctrl + Shift + O キーを押すか、macOS の 場合は Command + Shift + O キーを押します。 以前は、DevTools には一部の関数のみが表示されました。 次の図では、DevTools がアウトライン内のすべての関数を正しく一覧表示するようになりました。

HTML ファイルのアウトラインの改善

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

関連項目:

Wasm デバッグの適切なエラー スタック トレース

Microsoft Edge バージョン 90 以前では、DevTools では、エラー スタック トレースに汎用 Wasm 参照のみが表示されていました。 Microsoft Edge バージョン 91 以降では、DevTools はインライン関数要求を解決し、Wasm デバッグのエラー スタック トレースにソースの場所を表示します。 コンソールでのエラー スタック トレースの詳細については、「 コンソール オブジェクト API リファレンス」の 「エラー 」 を参照してください。

Microsoft Edge バージョン 91 以降では、DevTools はインライン関数要求を解決し、Wasm デバッグ用の適切なエラー スタック トレースを表示します。

Microsoft Edge バージョン 90 以前では、ソースの場所はエラー スタック トレースに表示されません。 ソースの場所には、 が含まれます dsquare。 Wasm デバッグ用の以前のエラー スタック トレース:

Wasm デバッグ用の以前のエラー スタック トレース

Microsoft Edge バージョン 91 以降では、ソースの場所がエラー スタック トレースに表示されます。 Wasm デバッグの適切なエラー スタック トレース:

Wasm デバッグの適切なエラー スタック トレース

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

注:

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

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