在VS Code中啟動Edge瀏覽器調(diào)試Vue項目
最近維護一個Vue 2.x的老項目，網(wǎng)上的資料介紹在VS中調(diào)試前端代碼都是使用Chrome瀏覽器，但我沒有裝Chrome瀏覽器，想在VS Code中直接調(diào)試Vue代碼，百度了很多資料，嘗試了好幾種方案，終于找到簡單可行的方法。
根據(jù)微軟官方的資料，如果想在VS Code中使用Edge瀏覽器進行調(diào)試，可以安裝Microsoft Edge Tools for VS Code 插件，安裝后可以打開一個跟VS Code集成的Edge瀏覽器，詳細內(nèi)容請參考官方鏈接：
在 Visual Studio Code 中調(diào)試 Microsoft Edge - Microsoft Edge Development | Microsoft Learn
DevTools 擴展的 launch.json 文件 - Microsoft Edge Development | Microsoft Learn
但是在VS Code中集成Edge進行調(diào)試對于電腦屏幕比較小的情況很不方便，而且還有一個問題就是這個集成的Edge瀏覽器打開我的Vue網(wǎng)站樣式有問題，最后只好放棄該方案。
下面是安裝Microsoft Edge Tools 后在launch.json文件里面添加的默認配置內(nèi)容：
"configurations": [ { "type": "vscode-edge-devtools.debug", "request": "attach", "name": "Attach to Microsoft Edge and open the Edge DevTools", "url": "http://localhost:9528", "webRoot": "${workspaceFolder}" }, { "type": "vscode-edge-devtools.debug", "request": "launch", "name": "Launch Microsoft Edge and open the Edge DevTools", "url": "http://localhost:9528", "webRoot": "${workspaceFolder}" } ]
安裝該工具后，再添加兩個使用VS Code直接打開獨立的Edge瀏覽器的配置：
{ "name": "Attach to Edge", "port": 9222, "request": "attach", "type": "msedge", "webRoot": "${workspaceFolder}" }, { "name": "Launch Edge", "request": "launch", "type": "msedge", "url": "http://localhost:9528", }, { "name": "chrome", "type": "chrome", "request": "launch", "url": "http://localhost:9528/", "webRoot": "${workspaceRoot}" },
保存launch.json文件，之后在VS Code的調(diào)試活動面板運行和調(diào)試下拉框里面選擇 Lanuch Edge，點擊按鈕進行調(diào)試就可以打開一個Edge窗口。
注意啟動調(diào)試之前，還需要修改Vue的調(diào)試工具支持 devtool: 'source-map'，注意不同的Vue CLI版本devtool 設(shè)置所在的文件不同，詳細內(nèi)容請參考Vue官方文檔：
在 VS Code 中調(diào)試 — Vue.js (vuejs.org)
按照上文內(nèi)容介紹，的確可以打開Edge進行調(diào)試，但是無法正確命中斷點，這是因為使用Vue CLI工程發(fā)布后的項目文件對JS進行了編譯，瀏覽器里面運行的JS代碼不是項目源碼，所以需要映射要調(diào)試的代碼路徑，在launch.json里面增加 sourceMapPathOverrides 的設(shè)置，并且修改webRoot的設(shè)置，修改后的配置內(nèi)容如下：
{ "name": "Launch Edge", "request": "launch", "type": "msedge", "url": "http://localhost:9528", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*" } },
sourceMapPathOverrides 的設(shè)置還可以指定更多的源碼映射路徑，比如下面的例子：
"configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8091/dist/#/", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", "webpack:///./~/*": "${webRoot}/node_modules/*", "meteor://app/*": "${webRoot}/*" } } ]
總結(jié)：
上面的過程關(guān)鍵點就是lauch.json的配置，用一張圖片來總結(jié)，如下圖。
浙公網(wǎng)安備 33010602011771號