在vs code中調試網頁的關鍵是配置launch.json文件并選擇合適的調試器。1. 安裝debugger for chrome/edge插件；2. 創建或修改launch.json文件，選擇chrome或edge作為環境；3. 配置type、request、name、url和webroot等參數；4. 啟動調試并設置斷點；5. 若斷點不生效，檢查webroot路徑、sourcemap設置及瀏覽器緩存；6. 調試多個頁面時可在launch.json中添加多個配置；7. launch模式用于啟動新瀏覽器實例，attach模式用于連接已有實例；8. 調試https頁面需使用https地址并在瀏覽器中允許不安全證書；9. 調試遠程服務器網頁需確保代碼一致、網絡可達，并正確配置url、webroot及sourcemappathoverrides。通過這些步驟，你可以在vs code中高效地進行網頁調試。
在VS Code中調試網頁，關鍵在于配置launch.json文件，并選擇合適的調試器。它允許你在熟悉的編輯器環境中直接進行斷點調試、查看變量和調用堆棧，極大地提升開發效率。
解決方案
-
安裝Debugger for Chrome/Edge插件：在VS Code擴展商店搜索并安裝Debugger for Chrome或Debugger for Edge，根據你常用的瀏覽器選擇。
-
創建或修改launch.json：點擊VS Code的調試圖標（側邊欄的“運行和調試”），然后點擊“創建 launch.json 文件”。選擇“Chrome”或“Edge”作為環境。如果已經存在launch.json文件，則直接修改。
-
配置launch.json：一個基本的launch.json配置如下所示：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", // 或 "edge" "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", // 替換為你的網頁URL "webRoot": "${workspaceFolder}" // 你的項目根目錄 } ] }- type: 指定調試器類型，chrome或edge。
- request: 指定調試請求類型，launch表示啟動瀏覽器并調試。
- name: 調試配置的名稱，可以自定義。
- url: 要調試的網頁URL。
- webRoot: 項目根目錄，用于映射源代碼文件。
-
啟動調試：保存launch.json文件，然后點擊調試面板上的綠色“啟動調試”按鈕。VS Code將啟動瀏覽器，并自動打開你配置的URL。
-
設置斷點和調試：在你的JavaScript代碼中設置斷點。當瀏覽器執行到斷點時，VS Code會自動暫停，允許你查看變量、單步執行代碼等。
如何解決VS Code調試時，斷點不生效的問題？
斷點不生效可能是個令人頭疼的問題。首先，確保你的webRoot配置正確，它應該指向包含你的源代碼文件的目錄。如果你的代碼經過了打包（例如使用webpack），請確保sourcemap配置正確生成，并且launch.json中的sourceMaps選項設置為true。另外，檢查瀏覽器開發者工具中的“Sources”面板，確認VS Code是否正確加載了你的源代碼文件。有時候清除瀏覽器緩存也能解決一些奇怪的問題。
VS Code調試時，如何同時調試多個瀏覽器頁面？
如果你需要在多個瀏覽器頁面中調試，可以在launch.json中添加多個配置。每個配置對應一個不同的頁面URL。例如：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome - Page 1", "url": "http://localhost:8080/page1.html", "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "Launch Chrome - Page 2", "url": "http://localhost:8080/page2.html", "webRoot": "${workspaceFolder}" } ] }
然后，在調試面板中選擇對應的配置啟動調試。
除了launch模式，還有attach模式？有什么區別？
除了launch模式，launch.json還支持attach模式。launch模式會啟動一個新的瀏覽器實例，并自動打開指定的URL。而attach模式則會連接到一個已經運行的瀏覽器實例。
使用attach模式，你需要先手動啟動瀏覽器，然后在launch.json中配置port選項，指定瀏覽器監聽的調試端口。例如：
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, // 默認調試端口 "webRoot": "${workspaceFolder}" } ] }
attach模式適用于調試已經運行在生產環境的頁面，或者需要手動控制瀏覽器啟動的情況。
如何調試HTTPS頁面？
調試HTTPS頁面與HTTP頁面類似，只需要在launch.json中將url配置為HTTPS地址即可。如果你的HTTPS證書是自簽名證書，可能會遇到證書錯誤。你可以在Chrome瀏覽器中訪問chrome://flags/#allow-insecure-localhost，啟用“Allow invalid certificates for resources loaded from localhost.”選項，允許加載來自localhost的不安全資源。
如何調試遠程服務器上的網頁？
調試遠程服務器上的網頁，需要確保你的本地代碼與遠程服務器上的代碼一致，并且能夠通過網絡訪問遠程服務器。在launch.json中，將url配置為遠程服務器的地址，并將webRoot配置為你的本地項目根目錄。如果遠程服務器使用了HTTPS，還需要注意證書問題。此外，可能還需要配置sourceMapPathOverrides選項，用于映射遠程服務器上的源代碼文件到本地文件。
