【Vue】使用Vue加VSCode进行调试

建议新开一个项目进行练习，把干扰降到最低以减少失败的可能性，在实验成功后才回到开发的项目中去。

依照官方文档建议，请先使用vue-cli创建项目（以3.0方式）。

1 创建vscode-vue-debug项目:

vue create vscode-vue-debug

选项参考如下：

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

2 Vue CLI 3配置，vscode-vue-debug/vue.config.js：

! 注意：Vue CLI 2的配置不同，参考

module.exports = {
  devServer: {
    port: 8080,
  },
  configureWebpack: {
    devtool: 'source-map'
  },
}

3 配置VSCode，vscode-vue-debug/.vscode/launch.json：

! 注意：url路径中的端口需要与vue.config.js文件中配置的一直

{
  // 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": "vuejs: chrome",
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
  ]
}

4 在VSCode中下载插件Debugger for Chrome：

• Name: Debugger for Chrome
• Id: msjsdiag.debugger-for-chrome
• Description: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
• Version: 4.12.11
• Publisher: Microsoft
• VS Marketplace Link

5 使用VSCode打开vscode-vue-debug项目，然后修改Home.vue代码vscode-vue-debug/src/views/Home.vue：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  mounted () {
    const dom = HelloWorld
    console.log(dom)
  },
}
</script>

在console.log(dom)一行添加断点（点击行左侧一点点的空白处会出现红色的小圆点）。

启动项目：yarn serve

6 点击菜单栏的Debug图标。确认左上角播放按钮旁选择的debug模式是vuejs: chrome，然后后按F5按键或播放按钮以运行。

此时会打开一个新的浏览器窗口。这是插件自带的谷歌浏览器，只有在这个浏览器中访问项目才能成功触发。

此时断点成功运行。没成功就继续往下看

断点不运行

断点可能遇到断点变灰、断点不运行等问题，这也是这种调试方式的局限之处。解决方案也有，那就是在当前页面手动debugger触发一次，然后再添加断点：

修改Home.vue代码vscode-vue-debug/src/views/Home.vue：

export default {
  name: 'Home',
  mounted () {
    const dom = HelloWorld
    console.log(dom)
    debugger
  },
}

此时令页面刷新，会看到VSCode打开了一个名为Home.js的只读文件，现在可以顺利在此文件中添加任何断点了。

同理，其它文件也可手动debugger，且每个不能命中断点的文件都需要手动debug。