使用VSCode 斷點除錯 js專案,html頁面
阿新 • • 發佈:2018-12-20
一、效果目的 1.在VSCode裡,直接F5開啟html頁面,並且可以在編輯器裡,進行斷點除錯js程式碼;
二、工具準備 1.VSCode 軟體 2.一個js專案 3.VSCode 上裝一個外掛:Debugger for Chrome 如圖
三、配置檔案更改 1.用VSCode裝載專案
2.然後按F5,出現這個框 選擇 Chrome
3.然後出現個配置的提示,和打開了launch.json這個檔案 在 這個檔案裡新增一段配置資訊
, { "name": "使用本機 Chrome 除錯", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/index.html", // "url": "http://mysite.com/index.html", //使用外部伺服器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設定為 false "http://mysite.com/index.html "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑 "sourceMaps": true, "webRoot": "${workspaceRoot}", // "preLaunchTask":"build", "userDataDir":"${tmpdir}", "port":5433 }
結果如圖
4.然後,更改除錯方式 如圖,選擇左邊的圓形按鈕,然後出來這個除錯配置管理介面,選擇“使用本機 Chrome 除錯”。
5.然後在專案的 js 處設定好斷點,按 F5,就可以進行斷點除錯了。
6.接著就 Enjoy!
PS:這種方法只適合普通頁面,要是你的js專案裡,包含json等遊覽器不支援本地遊覽的資源,那麼就需要開啟伺服器,配合這個外掛,才能進行斷點除錯。