VS Code：结合Chrome浏览器在VS Code进行断点调试

1.在根目录的vue.config.js文件中，确定项目运行的端口，如果你没有设置，系统运行时会默认给一个端口比如8080

module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',

  devServer: {

    port: 8082

  }

}

此处8082为项目启动端口

2.在根目录的package.json文件中，设置运行脚本

  "scripts": {

    "dev": "npm run serve",

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build"

  },

dev 为后续在终端窗口中，进入Debug调试时需要执行命令

 

3.设置调试模式的launch.json

在左侧栏点击运行调试的图标按钮，点击齿轮设置，在launch.json中可以看到以下生成的内容，如果没有，可以复制此段代码并保存。此处设置是为了让VScode 将断点调试进程附加到此端口地址url上，此url与项目的启动地址要保持一致。

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "pwa-chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:8082",

            "webRoot": "${workspaceFolder}"

        }

    ]

}

 

4.运行项目

打开菜单 终端-》新终端。在终端命令行中输入 npm run dev，使用Debug模式运行系统

执行完毕后会看到以下提示。

5.进入调试模式

以上说明此时系统可以正常运行了，我们现在准备开始进入调试模式。

点击左侧栏运行调试栏旁边的小绿色三角形，会自动弹出google浏览器，地址为http://localhost:8082/，如果你之前已经设置了断点，系统会自动运行到断点处停下。

 

以上调试步骤介绍完毕。

有些情况下，VScode 的默认值都已经设置好了，所以直接点击左侧栏的运行调试小按钮就能直接进入调试模式，不需要太繁琐的设置。

如果不能直接正常进入调试模式，你可以参照上述步骤进行排查。