vscode中如何調試vue代碼？下面本篇文章給大家介紹一下在vs code 中調試vue.js的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
相關推薦：《vscode教程》
步驟
- 打開vscode，安裝Debugger for Chrome
- 使用vue cli3創建vue應用
- 項目根路徑添加”vue.config.js” 文件
module.exports = { configureWebpack: { devtool: 'source-map' } }
- .vscode文件中的launch.json添加：
"version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }
- 設置一個斷點
- 在根目錄打開你慣用的終端并使用 Vue CLI 開啟這個應用：
npm run serve - 來到 Debug 視圖，選擇“vuejs：chrome/firefox”配置，然后按 F5 或點擊那個綠色的 play 按鈕。
- 隨著一個新的瀏覽器實例打開 http://localhost:8080，你的斷點現在應該被命中了
更多編程相關知識，請訪問：vscode教程！！
立即學習“前端免費學習筆記（深入）”；
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
