VSCode如何設置Vue前端的debug調試

 

 

vscode在調試vue.代碼時，如何進行debug?

1.安裝Chrome Debug插件。

2.在launch.json中，將url修改成你前端項目的路徑：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome 調試",
      "url": "http://localhost:8090/#/login",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": false,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

3.vue-cli2版本的，修改config/index.js中配置：

完成以上配置，重啟項目，打上斷點即可。