文章目錄

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

1. 代碼中寫debugger

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

2. Vue.js devtools

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

3. VScode + Chrome

• 1.vscode 安裝 Debugger for Chrome插件
  
• 2.配置vue.config.js// configureWebpack 里添加 devtool: 'source-map' 這個主要是在調(diào)試的時候能看到源碼，而不是被webpack打包后的代碼。
• 3.配置vscode
  點(diǎn)擊vscode左側(cè)工具欄的debug按鈕，點(diǎn)擊這個小齒輪顯示配置文件：
  
  配置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編輯器打斷點(diǎn)
  
  在文件行號左邊點(diǎn)一下，出現(xiàn)紅點(diǎn)就表示打上斷點(diǎn)了，接下來點(diǎn)擊debug的【run】按鈕會自動打開瀏覽器，并且在你打斷點(diǎn)的地方停下來，此時瀏覽器和vscode是同步進(jìn)入debug狀態(tài)的，都可以調(diào)試。
  

Tips: 調(diào)試方法有很多，適合的才是最好的。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。