vue调试（google浏览器和vscode）

vue调试网址

1. 安装

1. vscode和google浏览器（具体步骤省略）

2. Debugger for Chrome 扩展安装

sendpix1.jpg

2. 如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool 属性：

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

3. launch.json文件配置

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 launch.json 的文件，选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置

{
    // 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:3000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

4. 设置一个断点

5. VS Code 启动应用

//npm启动
npm run serve
//yarn启动
yarn run serve

6. Debug 启动

打开debug视图，选择 ‘vuejs: chrome’ 配置，然后按 F5 或点击那个绿色的 play 按钮,进入断点，配置成功

sendpix0.jpg