如何在cursor中调试vue代码

调试操作步骤：

如上图所示，在cursor中添加断点，调试vue代码，操作步骤如下。

1.配置调试器

F5或 Ctrl + Shift + D打开调试器，如果没有配置，Cursor 会提示你创建一个 launch.json 文件，自动生成调试配置。

内容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Vue.js in Chrome",
            "url": "http://localhost:1024", // 确保端口与你的开发服务器一致
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true
        }
    ]
}

1024是程序的访问端口，在文件vue.config.js中进行配置。

2.启用Source Map

在vue.config.js中添加配置：

devtool: 'source-map'

3.设置断点

在代码编辑器中，找到你想要调试的行。点击行号左侧的空白区域，设置断点（会出现一个红点）。

4.启动项目

5.启动调试器

F5启动调试器，看到的界面如下图所示：

注意：刚启动调试，断点是灰色状态，正常是红色圆点。

这是因为没有进入到调试页面的原因，当跳转到对应页面时，断点就自动变成红色圆点。比如断点是加在注册页面的注册方法上，当点击注册按钮时，断点就会变成红色显示。

6.快捷键

F5 跳过当前断点，进入下一断点。

F10 单步执行

F11 进入方法内部

Shift + F11 跳出当前方法

Shift + F5 停止调试