vscode-vue-debug

睡在哪里都是睡在夜里。——贾平凹《废都》

今天写个node+vue的vscode里对chrome进行debug

首先确保你的路径是项目根目录，懒得踩坑或者去对应配置

我这里用vue-cli创建一个新的vue项目

没有tyarn或者cnpm的话可以安装一个

npm i -g cnpm yarn tyarn --registry=https://registry.npm.taobao.org
# 查看全局依赖存储路径
yarn global dir

然后是配置环境变量

对应路径注意不是在Data目录里：

C:\Users\achao\AppData\Local\Yarn\bin

安装：

cnpm install -g @vue/cli
# OR
tyarn global add @vue/cli

创建一个项目：

vue create simple-vue
# OR
vue ui

此处选择vue2

创建好了我们用vscode打开

路径如下

我们运行一下

cnpm run serve
# OR
yarn serve

这里我编写代码时发现格式化老出问题，我不想让它换行我的标签属性，于是我修改了vscode的settings.json

{
    "workbench.colorTheme": "One Dark Pro",
    "git.autofetch": true,
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "files.autoSave": "onWindowChange",
    "html.format.enable": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "aligned-multiple"
        },
    },
    "beautify.config": {
        "brace_style": "collapse,preserve-inline"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}

然后开始在/src/components/HelloWorld.vue组件中写代码：

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  created() {
    [...this.someArrays(10)].forEach((i) => {
      console.log(i);
    });
  },
  methods: {
    *someArrays(len) {
      for (const i of Array.from(Array(len), (i, l) => l)) {
        yield i;
      }
    },
  },
};
</script>

保存运行一下，可以看到成功输出我们想要的数据

此时如果我们打开控制台查看源码，按ctrl+p搜索我们的HelloWorld.vue，搜出来的是编译后的页面：

因此我们需要配置下：

到vue.config.js

写法可以如下：

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

甚至可以这么写，我们顺带配置下启动端口：

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

重新yarn serve启动就可以看到我们的页面源码了

下方改依赖的操作是为了稍后和launch.json映射上，并没有太过深入研究过webpack这块，这是我搞了一整天发现的解决办法

然后去修改一下package.json中的依赖：

在devDependencies中新增：

"compression-webpack-plugin": "3.1.0"

并将@vue/cli-service版本改为^3.3.0

我这边完整的devDependencies为：

 "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "^3.3.0",
    "compression-webpack-plugin": "3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  }

然后执行一下安装依赖

cnpm i
# OR
tyarn install

重新启动项目

我们此时打两个断点break pointer

点击上方的运行=>启动调试，选择Chrome

然后这里我们可以按照文档编辑我们的debug配置

找不到了的话，在根目录的.vscode下面有个launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:2000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
  }

然后再次点击启动调试我们就可以看到断点生效了

此处如果上方package.json中的依赖配置正确，则可以对应看到浏览器源码结构为webpack://，因此上方配置需要重写webpack:///src/*到${webRoot}/*

如果没生效，且结构是这样的，依赖版本也不正确，这个甚至还没有webpack://下的src目录，那么vue2可以按照上面修改package.json的依赖解决

目前没有找出vue3的debug更好方案，留个坑在这，解决思路暂时为

• 了解学习vscode的debugger对应再修改.vscode/launch.json配置去重写映射上

• 了解学习compression-webpack-plugin这个插件

• 在chrome中打断点，vscode一样能直观看到变量和调用链

后续操作就和chrome中debug差不多的了，可以参考我这篇文章