使用VSCode 斷點調試 js項目,html頁面
阿新 • • 發佈:2018-11-15
裝載 一個 註釋 ger 路徑 roo pan csdn ask
轉載。 https://blog.csdn.net/arvin0/article/details/53673351
一、效果目的
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,就可以進行斷點調試了。
使用VSCode 斷點調試 js項目,html頁面