在Vue項目開發過程中，當遇到應用邏輯出現錯誤，但又無法準確定位的時候，知曉Vue項目調試技巧至關重要，debug是必備技能。 同后臺項目開發一樣，可以在JS實現的應用邏輯中設置斷點，并進行單步、進入方法內、跳出方法等調試，從而準確定位問題根源。 本文主要講解針對Vue項目進行調試的 3 種方法：debugger、Vue.js devtools、vs code插件。

前言

在Vue項目開發過程中，當遇到應用邏輯出現錯誤，但又無法準確定位的時候，知曉Vue項目調試技巧至關重要，debug是必備技能。

同后臺項目開發一樣，可以在JS實現的應用邏輯中設置斷點，并進行單步、進入方法內、跳出方法等調試，從而準確定位問題根源。

本文主要講解針對Vue項目進行調試的 3 種方法：debugger、Vue.js devtools、vs code插件。

調試方法

1、debugger

debugger是瀏覽器提供的調試語句，其主要是通過停止JS的執行，相當于設置斷點。它的使用方法很簡單， 只需要在我們的JS語句中， 插入一行debugger; 即可。

在JS代碼編寫的過程中，我們都會通過瀏覽器的調試模式（F12）來檢查代碼邏輯是否正確，大多數我們都是通過設置斷點來進行調試。

應用debugger調試Vue項目，需要在項目中需要的位置寫debugger,項目運行后，打開瀏覽器按F12，在chrome sources頁簽中就會直接進入斷點，至此就可以可以進行單步、跳步調試。

2、Vue.js devtools

該調試工具為針對 Chrome 瀏覽器而設計的開源調試工具，可以自行將該項目下載下來然后編譯，并將生成后的chrome插件安裝至chrome中，步驟如下：找到谷歌瀏覽器的擴展程序功能，勾選開發者模式，然后我們將插件文件夾里的shells>chorme文件夾直接拖到頁面中，完成安裝。也可以通過流程擴展直接安裝，如下圖所示。

然后運行本地項目用谷歌瀏覽器打開就可以調試了，如下圖所示。

我們通過vue.js devtools配合在瀏覽器中展示源代碼（Sources標簽頁）打斷點，來調試非常也是非常方便，如下圖所示。這是我用的比較多的調試方法。這種方法是基于 source-map 的，依賴于瀏覽器中和源碼的一個映射，通過映射來找到源文件

上面的方式要使用需要在前端項目的vue.config.js添加如下內容即可。

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

參考：在瀏覽器中展示源代碼

3、vs code 插件 Debugger for Chrome

這種方式打斷點最方便，但是不能配合vue.js devtools

在vs code中下載插件：Debugger for Chrome

安裝插件后，在vs左側會出現一個蜘蛛圖標，如下圖所示。

點擊在 Activity Bar 里的 Debugger 圖標來到 Debug 視圖，然后點擊那個齒輪圖標來配置一個 launch.json 的文件，選擇 Chrome/Firefox：Launch 環境。然后將生成的 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}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

啟動調試，在需要設置斷點的頁面設置一個斷點，即可斷點調試，如下圖所示。

這種方式是使用 vscode 提供的調試工具調試, vscode 的調試工具還是比較全面的，基本的逐行調試，查看變量值(watch) 什么的都有，而且它的使用讓我感覺像是在調試后端代碼,不過Debugger for Chrome 的缺點也很明顯，并不能及時復現 BUG, 因為它的調試是重新打開一個 Chrome Tab 頁，相當于重啟，而重啟以后很多調試的環境已經是不存在了，失去了調試的可能。當然隨著工具的不斷提升，這些問題都會慢慢被完善。

4、其他方式

平時開發中還可以使用輔助語句如：console.log()，把這個寫在代碼中，使用chrome，運行到這一行，會直接在結果顯示在瀏覽器控制臺上。

類似 console 這種打印信息的調試方法，幾乎每種語言都有，而 JS 也是非常多人在使用，而且也很方便，需要調試的地方就去插入console類的輸出語句就可以打印相關的信息，還可以根據不同類型的調試輸出不同顏色，不同類型的提示，比如 console.log, console.error, console.info...我基本只用console.log, 其具體使用方式如下

function getData() {
  // ...
  const data = console.log(data); //...;
}

簡單的輸出你需要的信息，比如你想知道接口返回的數據是什么？有沒有返回正確的數據？當發現渲染錯誤的時候我可能就會去打印一下，其實這種調試思路有點像黑盒測試，不用去管內部實現，就是看用戶輸入得到的輸出是什么

console 調試還有一個優點就是，打印的數據具有完整的數據結構，類似對象，數組之類的值，可以清晰的看到它的數據結構，像 JS 這種具有復雜引用的語言，可以查看它的原型鏈，即使是 vue 負責項目的開發中也能幫助我們進一步分析輸出，這也是瀏覽器提供給我們的便利。

以上介紹的幾種方式，最推薦使用的是vue的chrome插件來進行調試（方式二）

參考資料

vue-devtools：https://devtools.vuejs.org/

在 VS Code 中調試：https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

Vue2.x 組件通信方式：http://www.guosisoft.com/article/detail/411234710110277

Vue 前端開發團隊風格指南（史上最全）:http://www.guosisoft.com/article/detail/415491255230533

結語

如果本文對你有一點點幫助，點個贊支持一下吧，你的每一個【贊】都是我創作的最大動力 ^_

更多技術文章請往:http://www.guosisoft.com/article，大家一起共同交流和進步呀