如何使用VSCode + Chrome調試Vue應用

1. 在VSCode中安裝插件 Debugger for Chrome

2. 創建demo項目 vue init webpack vuejs-webpack-project

3. 修改source map

   打開config/index.js文件, 修改source map屬性，從cheap-module-eval-source-map改為source-map

4. 'use strict'
   module.exports = {
     dev: {
       /**
       * Source Maps
       */
       // https://webpack.js.org/configuration/devtool/#development
       // devtool: 'cheap-module-eval-source-map',
       devtool: 'source-map',
       // ...
     },
   
     build: {
       //...
     }
   }
   

   　　添加測試代碼 修改src/components/HelloWorld.vue

<template>
<div class="hello">
  <!-- .... -->
<br/>
<button @click="test">測試222</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
//... 
methods: {
test(params) {
  console.log('hello bbb 222 33 ccc')
}
}
}
</script>

　　

 

{
    //...
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": false,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
} 

　　

• 啟動server，可以使用WebStorm npm scripts中雙擊start啟動server， 也可以在命令行中執行命令npm run start啟動server

• 點擊debug，調試vuejs: chrome，這時候會打開chrome，當我們點擊測試按鈕VS Code, VS Code就會響應斷點狀態，如下圖所示 :

 

 

目前我最喜歡的Vue項目調試方式還是: WebStorm+Chrome，因為WebStorm的代碼編輯，重構等功能本來就很強大，調試時的的變量顯示也是最友好的。只是WebStorm會比較重，啟動較慢，但是功能最強大

VSCode+Chrome調試功能會稍微遜色一些，但是也基本可用，比較輕量級，啟動速度較快。如果經常切換項目，可以考慮使用VSCode+Chrome的調試方式