vue調試的三種方式（debugger+vue-devtools+Debugger for Chrome）

第一種調試方式，在vue.config.js文件中加入如下代碼，即可開啟

  configureWebpack: {
    devtool: '#eval-source-map'
  },

然后在項目中需要的位置寫debugger,項目運行后，在chrome中就會直接進入斷點，網上還有一種方式如下圖，在sources中的page頁簽下的webpack://下找到index.vue找到vue文件，就可以直接打斷點，然后也可以進入，但是這種辦法有個比較不爽的地方就是，你看不到let定義變量的值,在下面的圖片中來說，就是你直接看不到formatDisplayNameData中的值，只能看到storData中的值，這樣調起來就很不爽，所以還是開啟debugger調試的方式。

 

第二種 (vue-devtools) 這個個人也沒搞清楚是怎么調的，反正我是按照網上的方法安裝成功，vue的界面也出來了

參考的鏈接：

https://www.cnblogs.com/laneyfu/p/11221673.html

https://github.com/vuejs/vue-devtools/tree/master

https://www.jianshu.com/p/a8cda3388854

第三種(Debugger for Chrome) 就下在vscode中安裝插件，也很容易安裝成功了

參考的鏈接：

https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

https://www.cnblogs.com/xifengxiaoma/p/9530737.html