文章目錄

• 1. 代碼中寫debugger
• 2. Vue.js devtools
• 3. VScode + Chrome

1. 代碼中寫debugger

如果是簡單的代碼調試，想看到的值很少，就直接使用原生的debugger語句調試或使用console.log打印在控制臺，這個適用于比較簡單的調試。

2. Vue.js devtools

在瀏覽器安裝擴展 Vue Devtools，然后F12控制臺會多出一個tab，CSDN文章編輯頁面就是Vue寫的，點擊選擇組件就可以查看組件的data屬性值、vuex等信息：

3. VScode + Chrome

• 1.vscode 安裝 Debugger for Chrome插件
  
• 2.配置vue.config.js// configureWebpack 里添加 devtool: 'source-map' 這個主要是在調試的時候能看到源碼，而不是被webpack打包后的代碼。
• 3.配置vscode
  點擊vscode左側工具欄的debug按鈕，點擊這個小齒輪顯示配置文件：
  
  配置url，url為npm run serve后的地址【注意端口號】：{"version": "0.2.0","configurations": [{"type": "chrome","request": "launch","name": "vuejs: chrome","url": "http://localhost:8080","webRoot": "${workspaceFolder}/src","sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"}}] }
• 4.在vscode編輯器打斷點
  
  在文件行號左邊點一下，出現紅點就表示打上斷點了，接下來點擊debug的【run】按鈕會自動打開瀏覽器，并且在你打斷點的地方停下來，此時瀏覽器和vscode是同步進入debug狀態的，都可以調試。
  

Tips: 調試方法有很多，適合的才是最好的。

總結

以上是生活随笔為你收集整理的Vue 项目调试总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。