與Visual Studio Code調(diào)試集成

若要使用 DevTools UI 在調(diào)試模式下Visual Studio Code打開 DevTools，請右鍵單擊某個.html文件或單擊“啟動項目”按鈕，如打開 DevTools 和 DevTools 瀏覽器中所述。 如果通過單擊 Microsoft Edge 工具側(cè)欄中的“生成launch.json”按鈕來定義與 DevTools 兼容的launch.json文件，還可以使用 Visual Studio Code UI 啟動調(diào)試器（如 F5）打開 DevTools 選項卡。

在調(diào)試模式下以 Visual Studio Code 打開 DevTools 時，將打開以下 UI 組件：

另請參閱右鍵單擊 HTML 文件中的調(diào)試器中的步驟 5：單步執(zhí)行 JavaScript 代碼。

其中大多數(shù)方法都需要包含 URL 的 DevTools 生成的 launch.json 文件。

在資源管理器中右鍵單擊“.html使用 Edge 打開”>中的文件。 此方法實質(zhì)上使用文件路徑而不是 URL，并且不需要生成 launch.json 文件。

活動欄>Microsoft Edge 工具> 單擊“ 啟動項目 ”按鈕。

按 F5。

在 “活動欄”上，單擊“ 運(yùn)行和調(diào)試 ”圖標(biāo) (“ ) ，然后在“ 運(yùn)行和調(diào)試 ”側(cè)欄中，單擊“ 運(yùn)行和調(diào)試” 按鈕。

打開Visual Studio Code命令面板，在 之后>開始鍵入單詞 debug，然后選擇“調(diào)試：打開鏈接”。 請參閱 VS Code 中的瀏覽器調(diào)試中的“打開鏈接”命令。

可以在調(diào)試會話中打開 “Edge DevTools：瀏覽器 ”選項卡， (嵌入式 DevTools 瀏覽器) 。 DevTools 擴(kuò)展在 Visual Studio Code 中打開一個新的瀏覽器作為嵌入式瀏覽器。 此 Devtools：瀏覽器 選項卡可以在編輯器中的任意位置移動。 可以將此選項卡與源代碼并排使用，或者拆分窗格并在代碼下方提供瀏覽器預(yù)覽：

可以將 DevTools 擴(kuò)展與通常Visual Studio Code調(diào)試 UI/工作流，如下所示。 在此方法中，要進(jìn)入調(diào)試模式，我們不使用 DevTools UI;我們不會右鍵單擊文件 .html 以選擇“ 使用 Edge 打開”，并且未單擊 “活動欄>Microsoft Edge 工具>啟動項目 ”按鈕。

JavaScript 調(diào)試內(nèi)置于 Visual Studio Code;無需安裝擴(kuò)展即可在 Chrome、Microsoft Edge 或 Node.js 中進(jìn)行調(diào)試。 如果使用 Microsoft Edge 選項和Visual Studio Code調(diào)試功能和 UI 進(jìn)行調(diào)試，則可以從 JavaScript 調(diào)試器啟動 Microsoft Edge DevTools。 如果未安裝 DevTools 擴(kuò)展，系統(tǒng)會提示你選擇安裝它。

DevTools 擴(kuò)展提供了其他功能，例如具有設(shè)備仿真工具欄的嵌入式 DevTools 瀏覽器，并提供在 Visual Studio Code 中進(jìn)入調(diào)試模式的其他方法。

若要啟動Visual Studio Code調(diào)試器以及 DevTools，請使用Visual Studio Code的常見 UI：

打開新的Visual Studio Code窗口。 沒有文件夾 (工作區(qū)) 處于打開狀態(tài)， DevTools 選項卡也未打開。

(工作區(qū)) 打開文件夾。 例如，選擇“ 文件>打開最近打開>C:\Users\username\Documents\GitHub\Demos\demo-to-do”。 DevTools 選項卡未打開。

打開文件 .html 。

在編輯器中.html單擊文件，然后執(zhí)行以下任一 UI 作，以通常的方式啟動Visual Studio Code調(diào)試器：

按 F5。

在 “活動欄”上，單擊“ 運(yùn)行和調(diào)試 ”圖標(biāo) (“ ) ，然后在“ 運(yùn)行和調(diào)試 ”側(cè)欄中，單擊“ 運(yùn)行和調(diào)試 ”按鈕，如下所示。

打開Visual Studio Code命令面板，開始鍵入“調(diào)試”一詞，然后選擇“調(diào)試：打開鏈接”。

Microsoft Edge 工具 未顯示在上述屏幕截圖中，因為對于此屏幕截圖，DevTools 已卸載。

選擇“ Web 應(yīng)用 (Edge) ”。

在“調(diào)試”工具欄上，單擊“ 檢查 ”按鈕，其中包含 “打開瀏覽器 DevTools”工具提示：

首次單擊“調(diào)試”工具欄上的“ 檢查 ”按鈕時， 將打開“擴(kuò)展：市場 側(cè)欄”，其中包含 Microsoft Edge Tools for VS Code：

單擊“ Microsoft Edge Tools for VS Code>安裝”。

按關(guān)閉 DevTools 關(guān)閉 DevTools。

打開文件夾和 .html 文件。

繼續(xù)以下作。

假設(shè)打開的文件夾不包含 .vscode 已包含 launch.json 文件的文件夾：

選擇 “活動欄>Microsoft Edge 工具”> ，單擊“ 生成launch.json ”按鈕，然后按 F5。 或者，請參閱 打開 DevTools 和 DevTools 瀏覽器。

安裝 DevTools 擴(kuò)展后，打開文件.html并單擊“調(diào)試”工具欄上的“檢查”按鈕時，Edge DevTools 選項卡將在Visual Studio Code內(nèi)打開：

在上面的屏幕截圖中，文件夾的“資源管理器”中有.vscode一個launch.json文件，窗口底部有一個來自該文件的字符串“啟動 Edge 無外設(shè)并附加 DevTools”，因為使用 DevTools 生成的launch.json文件的 F5 等Visual Studio Code功能打開了 DevTools。

如果需要，在 “Edge DevTools ”選項卡的左上角，單擊“ 切換截屏” 按鈕：

此時會打開 “Edge DevTools：瀏覽器 ”選項卡。

在上面的屏幕截圖中，文件夾中的“資源管理器”中.vscode沒有l(wèi)aunch.json文件，窗口底部沒有“啟動 Edge 無外設(shè)”和“附加 DevTools”等字符串，因為通過右鍵單擊.html資源管理器中的文件打開了 DevTools。

有關(guān)其他 UI 步驟和屏幕截圖，請參閱 名稱字符串在 UI 中的顯示位置。 在大多數(shù)情況下，你只需要知道 DevTools 生成的 launch.json 文件的內(nèi)容，即需要在多個位置的字符串中 "url" 輸入所需的 URL。

若要調(diào)試項目，可能需要更改在 Visual Studio Code Microsoft Edge 中打開的默認(rèn)頁面。 若要將默認(rèn)頁面更改為項目的網(wǎng)站，請執(zhí)行以下作：

在“Visual Studio Code”中，選擇“文件>新建窗口”。 請注意，未打開任何文件夾。

在 “活動欄”上，選擇“ Microsoft Edge 工具”。

在 “Microsoft Edge 工具：目標(biāo) ”面板中，單擊 “打開文件夾” 鏈接。

在 Visual Studio Code 中開始調(diào)試時，選擇具有新默認(rèn)頁面的項目文件夾。

首次打開文件夾時，必須確認(rèn)信任此文件夾中文件的作者：

（可選）選中“ 信任父文件夾中所有文件的作者”復(fù)選框，然后單擊“ 是，我信任作者” 按鈕：

首次執(zhí)行此過程時，還必須再次選擇 “活動欄>Microsoft Edge 工具 ”。

Microsoft Edge 工具：目標(biāo)面板現(xiàn)在顯示兩個按鈕：啟動實例和生成launch.json：

選擇“ 生成launch.json ”，在項目中創(chuàng)建 launch.json 。 這必須是由 DevTools 創(chuàng)建的較長文件，如 DevTools 擴(kuò)展的 launch.json 文件所示，而不是由 Visual Studio Code 創(chuàng)建的更通用的簡短文件。 另請參閱對 DevTools 擴(kuò)展進(jìn)行故障排除中的刪除或重新創(chuàng)建launch.json。

在 launch.json中，添加項目的 URL。 如果將 URL 留空，則顯示默認(rèn)頁面。

保存 launch.json。

選擇在 Visual Studio Code 中調(diào)試項目時，無論使用 DevTools UI 功能還是常用的Visual Studio Code UI 功能，它都會自動啟動瀏覽器并打開開發(fā)人員工具，其中顯示了在launch.json文件中指定的 URL。

打開的網(wǎng)頁在 DevTools 中由 設(shè)置 launch.json ，如果該文件存在于工作區(qū) (打開的文件夾) 。 因此，你可能會在打開自己的.html文件時按 F5，但在“DevTools”選項卡中看到默認(rèn)的“成功”頁。 在這種情況下，選項包括：

在打開的文件夾中進(jìn)行編輯 launch.json ，以指向通常) 或可能指向文件路徑 (URL。 然后可以使用Visual Studio Code調(diào)試器工作流/UI，例如 F5。

或者，刪除 launch.json，然后右鍵單擊“>活動欄>資源管理器>”，.html選擇“使用 Edge 打開”。 此方法不使用 Visual Studio Code 調(diào)試器工作流/UI，例如 F5。

外部頁面：