vscode调试vue项目设置

本文详细介绍如何在VSCode中调试Vue项目,包括安装调试插件、配置launch.json文件及运行调试过程。通过F5断点调试,实现类似VS的调试体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vscode如何调试vue项目,通过F5进行断点调试,类似与vs进行调试,vscode需要安装插件以及配置launch.json文件。

步骤一:

1.找到“扩展”或者按快捷键“Ctrl+Shift+X”,如下图,输入Debugger for Chrome查找,并安装。

2.项目里创建“launch.json”文件,内容如下(关键是json配置):

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080/",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": ".NET Core Launch (console)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/<insert-target-framework-here>/<insert-project-name-here>.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}
3.在“package.json”文件里的"scripts"中添加:"serve": "vue-cli-service serve" 。如下图:

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

 

4.按“Ctrl+Shift+Y” 调出终端,输入:npm run dev

 

访问地址:http://localhost:8080

5.找到“Ctrl+Shift+D”,点击绿色按钮开始调试,会弹出google浏览器访问网站,在你想要的地方添加断点,如下图:

 

### 设置和使用VSCode中的调试断点 在Visual Studio Code中配置好Clang/LLVM编译器和调试器之后,可以方便地设置和管理断点来辅助程序调试[^1]。 #### 断点的作用 断点是在程序中指定的一个位置,在此位置上程序会暂时停止执行并交由调试工具接管。通过这种方式可以在怀疑存在错误的地方暂停程序运行,以便检查变量状态和其他环境因素[^2]。 #### 如何设置断点 为了在代码编辑器内某一行处创建一个简单的断点,只需点击该行左侧的灰色区域即可;此时会出现一个小红点表示已成功设置断点。对于更复杂的场景,则可以通过命令面板(`Ctrl+Shift+P`)输入`Toggle Breakpoint`来进行操作。 当遇到崩溃情况时,应该先定位到发生异常的具体部分,并在此之前的合适位置放置断点以帮助分析问题所在。 #### 启用或禁用断点 每一个设定好的断点都可以被单独启用或者禁用。这意味着即使定义了许多不同的断点,也可以控制哪些会在实际调试过程中起作用——只有处于激活状态下的那些才会使程序暂停下来等待进一步指令。默认情况下新建立起来的所有断点都是开启的状态[^3]。 ```json { "version": "0.2.0", "configurations": [ { "name": "(lldb) Launch", "type": "cppdbg", "request": "launch", "program": "${workspaceFolder}/build/main.out", "args": [], "stopAtEntry": false, "cwd": "${fileDirname}", "environment": [], "externalConsole": true, "MIMode": "lldb" } ] } ``` 上述JSON片段展示了如何配置用于启动带有LLDB作为后台引擎支持C++项目调试会话所需的必要参数。请注意调整路径以及其他选项使之匹配个人项目结构需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值