VS code断点调试vue项目代码

2023-07-18 05:07| 来源: 网络整理| 查看: 265

1、搜索安装 debugger for chrome 插件在这里插入图片描述 2、创建launch.json文件

点击运行和测试，或下面的创建文字按钮，选择chrome 在这里插入图片描述 3、修改launch.json文件的配置项

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch to Chrome", "webRoot": "${workspaceRoot}/src", // url要和自己项目启动的ip和端口一致 "url": "http://localhost:8080", "sourceMaps": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } } ] }

4、修改webpack配置

1、打开根目录下的 config 目录下的 index.js 文件 2、将dev 节点下的 devtool 值改为 ‘source-map’ 3、将dev节点下的 cacheBusting 值改为 false 在这里插入图片描述 5、打断点调试

打开调试工具，点击绿色开始按钮，进行调试在这里插入图片描述正常启动后，会看到下面的内容，这时就可以根据自己的需求进行调试了

【本文地址】

公司简介

联系我们