使用 Microsoft Edge DevTools 對 WebView2 應用程式進行偵錯

使用 Microsoft Edge 開發人員工具對 WebView2 控件中顯示的 Web 內容進行偵錯，其方式與偵錯在 Microsoft Edge 中顯示的另一個網頁相同。

當您使用 WebView2 應用程式時，有數種方式可以開啟 DevTools：

• 按 F12。
• 按 Ctrl+Shift+I。
• 以滑鼠右鍵按下頁面，然後選取 Inspect。

應用程式也可以使用 OpenDevToolsWindow API，以程式設計方式開啟 DevTools 視窗。 例如，如果已移除上述快捷鍵和作功能表專案，您可以使用此方法。

如果上述方法都無法使用，您可以透過環境變數或登錄機碼，將 新 --auto-open-devtools-for-tabs 增至瀏覽器自變數。 此方法會在建立 WebView2 時開啟 DevTools 視窗。

需要來源對應，才能偵錯已編譯內容的原始程式碼，包括：

• 轉換的 JavaScript，例如 TypeScript 或小化 JavaScript。
• 已編譯的 CSS，例如 SASS 或 SCSS。

WebView2 不會載入使用下列任一方法載入的內容所參考的來源對應：

• 事件 WebResourceRequested 。 請參閱：

  • 在 WebView2 應用程式中使用本機內容中處理 WebResourceRequested 事件，以載入本機內容。
  • 來源對應與WebResourceRequested在 WebView2 應用程式中使用本機內容中的事件對應。

• 虛擬主機名對應。 請參閱：

  • 在使用 WebView2 應用程式中的本機內容中，使用虛擬主機名對應載入本機內容。
  • 在使用 WebView2 應用程式中的本機內容中，使用虛擬主機名對應的來源對應。

• DevTools 概觀。
• 開始使用 WebView2
• WebView2Samples 存放庫 - WebView2 功能的完整範例。
• WebView2 API 參考