共用方式為


線上與即時議題分析

原始碼 (.html、 或.css.js檔案) 的問題會用波浪線底線標示。 您可以檢查問題,獲得詳細資訊,了解問題所在、如何修復,以及在哪裡可以找到更多資訊。 要檢查問題,請點擊帶有波浪底線的代碼:

無障礙問題被報告在一段程式碼中,說明如何修復問題及更多資訊來源

此功能需要節點套件管理器) (Node.js 與 npm。 請參考安裝 DevTools 擴充套件中的步驟 4:安裝 Node.js 和節點套件管理器 (npm) ,Visual Studio Code

此功能預設開啟;在設定中勾選 Webhint 勾選框。 要開啟或關閉此功能,請選擇活動 >Microsoft邊緣工具> ,將滑鼠移至「 目標>更多行動 」右側, (......) >開啟設定> ,選擇或清除 Webhint 勾選 框:

設定中的 Webhint 勾選框

要查看檔案中的所有問題,請點擊 「檢視問題」:

原始碼中標示的問題,並有導航列說明問題及前往下一期及先前問題的按鈕

下方 面板的問題分 頁列出了 DevTools 在目前開啟檔案中發現的所有問題:

Visual Studio Code 下方面板中的問題分頁,列出專案檔案中所有的問題

影片:Edge DevTools 與 VSCode 中的進階過濾問題

影片縮圖圖片「Edge DevTools 與 VSCode 的進階篩選問題」

即時更新問題報告

問題會在你編輯程式碼時即時評估。 當你打字時,會收到關於發現問題的回饋,以及如何解決:

一個可能的問題正在解釋在輸出元素上

自動化快速修復與問題過濾

Microsoft Edge DevTools 擴充套件適用於 Visual Studio Code 包含快速修復功能。 透過快速修正,您可以自訂擴充功能的錯誤回報,以符合目前專案的需求。

當你將滑鼠移到有問題的元素上時,會看到一個燈泡 (燈 泡圖示) 圖示,表示有快速修復方法可用:

一個錨點元素,帶有協定專屬的 href 屬性,並以波浪形底線標示為問題,並以波浪形下線和燈泡圖示標示

點擊燈泡圖示會顯示選項清單。 例如,如果你新增了一個連結具有協定相對 URL,你會得到以下快速 修復 清單可供選擇:

快速修正面板在錯誤的錨點旁邊打開,提供多種快速修復選項

你可以選擇任何快速 解決 方法來解決問題或停止報告:

  • 修正「no-protocol-relative-urls」問題 ——新增缺少的網址前綴 https://

  • 在此專案中關閉「no-protocol-relative-urls」 提示 - (.hintrc 專案資料夾建立設定檔,若) 尚無設定檔,並告知擴充功能不回報此問題。

  • 為此專案編輯 .hintrc - 開啟 .hintrc 設定檔,方便你編輯以自訂擴充功能錯誤回報。

另請參閱