vscode如何調(diào)試vue？
使用 VS Code 斷點調(diào)試
直接在 Chrome 的調(diào)試窗口中調(diào)試 Vue 代碼有諸多不便， 好在 Visual Studio Code 中提供了 Debugger for Chrome 插件，能夠通過配置直接在 VS Code 斷點調(diào)試代碼, 并且在 VS Code 的調(diào)試窗口看到 Chrome 中 console 相同的值，這篇文章就來介紹一下這個配置過程。
相關(guān)推薦：vscode教程
1.開啟 Chrome 遠程調(diào)試端口
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
首先我們需要在遠程調(diào)試打開的狀態(tài)下啟動 Chrome, 這樣 VS Code 才能 attach 到 Chrome 上。
Windows
右鍵點擊 Chrome 的快捷方式圖標，選擇屬性
在目標一欄，最后加上 –remote-debugging-port=9222，注意要用空格隔開
macOS
打開控制臺
執(zhí)行命令 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome –remote-debugging-port=9222
Linux
打開控制臺
執(zhí)行命令 google-chrome –remote-debugging-port=9222
2.安裝 Chrome Debug 插件
點擊 Visual Studio Code 左側(cè)邊欄的擴展按鈕， 然后在搜索框輸入Debugger for Chrome 并安裝插件，再輸入，安裝完成后點擊 reload 重啟。
?
3.創(chuàng)建 Debug 配置文件
點擊 Visual Studio Code 左側(cè)邊欄的 調(diào)試 按鈕， 在彈出的調(diào)試配置窗口中點擊 設(shè)置 小齒輪， 然后選擇 chrome, VS Code 將會在工作區(qū)根目錄生成.vscode 目錄，里面會有一個 lanch.json 文件并會自動打開
用下面的配置文件覆蓋自動生成的 lanch.json 文件內(nèi)容。
注意：URL中的端口號要跟WEBPACK配置的啟動端口號一致。
{ ??//?Use?IntelliSense?to?learn?about?possible?attributes. ??//?Hover?to?view?descriptions?of?existing?attributes. ??//?For?more?information,?visit:?https://go.microsoft.com/fwlink/?linkid=830387 ??"version":?"0.2.0", ??"configurations":?[ ????{ ??????"type":?"chrome", ??????"request":?"attach", ??????"name":?"Attach?to?Chrome", ??????"port":?9222, ??????"webRoot":?"${workspaceRoot}/src", ??????"url":?"http://localhost:8080/#/", ??????"sourceMaps":?true, ??????"sourceMapPathOverrides":?{ ????????"webpack:///src/*":?"${webRoot}/*" ??????} ????} ??] }
4.修改 webpack 配置
如果是基于 webpack 打包的 vue 項目， 可能會存在斷點不匹配的問題, 還需要做些修改：
1.打開根目錄下的 config 目錄下的 index.js 文件
2.將dev 節(jié)點下的 devtool 值改為 ‘eval-source-map’
3.將dev節(jié)點下的 cacheBusting 值改為 false
?
5.開啟調(diào)試
?
上述配置完成之后：
1. 通過第一步的方式以遠程調(diào)試打開的方式打開 Chrome
2. 在 vue 項目中執(zhí)行 npm run dev 以調(diào)試方式啟動項目
3. 點擊 VS Code 左側(cè)邊欄的調(diào)試按鈕，選擇 Attach to Chrome 并點擊綠色開始按鈕，正常情況下就會出現(xiàn)調(diào)試控制條。
現(xiàn)在就可以在 vue 文件的 js 代碼中打斷點進行調(diào)試了。
