Edge で Copilot を使用して DevTools コンソールのエラーとソース コードについて説明する

  • [アーティクル]

Microsoft Edge DevTools の コンソール および ソース ツールは、Microsoft Edge の Copilot と統合され、エラーとソース コードを理解するのに役立ちます。 これらは実験的な機能であり、Microsoft Edge のフラグによって有効になっています。

"このエラーについて説明する" 機能

DevTools を使用して Web ページを検査すると、 コンソール ツールにエラーや警告が表示されることがよくあります。 これらのエラーと警告は、理解と修正が困難な場合があります。 このエラーの説明機能を使用すると、Edge の Copilot でエラーまたは警告に関する詳細情報を取得できます。

Microsoft Edge サイドバーの Copilot で、エラー メッセージと説明が表示されます。

"これらのコード行について説明する" 機能

ビルドしなかった Web ページを調べると、 ソース ツールに表示されるソース コードに慣れていない可能性があります。 次のコード行を説明する機能を使用すると、Edge の Copilot のソース コードに関する詳細情報を取得できます。

Microsoft Edge サイドバーの Copilot。ソース コードと説明が表示されます。

サポートされるシナリオ

これらの機能は標準のブラウザー ウィンドウで使用するため、次のシナリオでは使用できません。

機能を有効にする

これらの説明機能を使用するには、Edge で Copilot を有効にし、DevTools の機能を有効にするフラグを設定します。

Microsoft Edge で Copilot を有効にする

Microsoft Edge で Copilot を有効にするには:

  1. Microsoft Edge にサインインします。 「 サインインしてデバイス間で Microsoft Edge を同期する」を参照してください。

  2. ブラウザー ツール バーの右上隅に Copilot アイコン (ブラウザー ツール バーの [Copilot] アイコン) が表示されていることを確認します。 そうでない場合は、Microsoft Edge で [設定など] を選択します (...) >設定>サイドバー>Copilot を選択し、[ Show Copilot]\(コピロットの表示 \) トグルをオンにします。

DevTools で機能を有効にする

Copilot を使用して DevTools でエラーとソース コードの説明を有効にするには:

  1. Microsoft Edge で、新しいタブまたはウィンドウで に edge://flags 移動します。

  2. AI を使用 して DevTools について説明する入力を開始します。 フラグの一覧がフィルター処理され、探しているフラグのみが表示されます。

  3. [ Ai を使用した DevTools の説明 ] フラグで、ドロップダウンから [有効] を選択し、[ 再起動 ] をクリックしてブラウザーを再起動します。

    edge://flags の

    フラグは既に有効になっている可能性があります。この場合、フラグを変更する必要はありません。

コンソール ツールでエラーと警告を説明する

コンソール ツールで Copilot を使用してエラーまたは警告を説明するには:

  1. 説明するエラーを含む Web ページを開きます。 たとえば、新しいウィンドウまたはタブで コンソール エラー説明テスト ページ を開きます。

  2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  3. DevTools のアクティビティ バーで、[ コンソール ] タブを選択します。

  4. レンダリングされた Web ページで、1 つ以上のエラー説明の横にある [実行 ] ボタンをクリックします。

    その後、デモ ページでエラーが生成されます。これは コンソールに表示されます。

    Edge のデモ Web ページの横に DevTools コンソールがあり、いくつかのエラー メッセージが表示されています

  5. コンソール ツールで、いずれかのエラー メッセージの横にある [Copilot: "このエラーを説明する" (コンソールの [エラーの説明] アイコン) ボタンをクリックします。

    Microsoft Edge サイドバーで Copilot が開き、エラー メッセージ、 DevTools コンソールからのエラー メッセージの説明 、エラーを説明する応答が表示されます。

    Microsoft Edge サイドバーの Copilot で、エラー メッセージと説明が表示されます

  6. エラーの詳細を取得するには、Copilot で追加の質問を入力します。

ソース ツールでソース コードを説明する

ソース ツールで Copilot を使用してコードを説明するには:

  1. 説明するソース コードを含む Web ページを開きます。 たとえば、新しいウィンドウまたはタブで TODO アプリ のデモ ページを開きます。

  2. DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

  3. DevTools のアクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] (その他のツール アイコン) ボタンをクリックします。

  4. [ソース] ツールの [ページ] タブで、ファイルを選択しますto-do.js。 そのファイルのソース コードが [エディター] ウィンドウに表示されます。

  5. ファイル内のコードを数行選択します to-do.js 。 たとえば、関数の内容を changeTask 選択します。

    to-do.js ファイルが開き、数行のコードが選択されている Edge のソース ツール

  6. コードを右クリックし、[ Copilot: Explain these lines of code]\(次のコード行について説明する\) を選択します。

    Microsoft Edge サイドバーで Copilot が開き、ソース コード、 DevTools のソース ツールからこれらのコード行を説明 するメッセージ、ソース コードを説明する応答が表示されます。

    Microsoft Edge サイドバーの Copilot で、ソース コードと説明が表示されている

  7. ソース コードの詳細を取得するには、Copilot で追加の質問を入力します。

フィードバックの提供

上記の機能を使用するときに Edge の Copilot が提供する応答は自動的に生成されるため、驚きや間違いが発生する可能性があります。 応答の品質と精度のレベルは常に向上していますが、正しくない応答が表示される場合は、「 Edge 実験の Copilot のエラーとソース コードの説明に関するフィードバック」のコメントを追加して、お知らせください。