开始使用 VSCode 调试

本文作者作为深度vi和Atom用户,分享选择VSCode的原因,包括颜值高、vi支持度好、调试体验佳、插件多、对TypeScript支持更好等。还介绍了一分钟体验VSCode Node.js调试,给出JavaScript和TypeScript版的调试例子,并列出相关参考资料。

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

一些由浅入深的 VScode 调试例子,能让你快速理解和上手 VSCode 调试。

为什么使用 VSCode ?

我是深度 vi 用户,之前 Atom 深度使用者,现在基本上转到 VSCode,下面是我选择 VSCode 的原因:

  • 颜值高,早期不如 Atom,现在已经逐渐赶上
  • vi 支持度好,和 Atom 还差点,但已够用
  • 调试体验好,完爆 Vim 和 Atom
  • 插件多,和 Vim 和 Atom 打个平手
  • 对 TypeScript 支持更好

浅浅地深入

全部例子

JavaScript 版例子

TypeScript 版例子

参考资料

### 如何使用VSCode调试Vue项目 为了在 Visual Studio Code (VSCode) 中设置并调试 Vue.js 项目,可以遵循以下配置方法: #### 安装必要的扩展 确保已安装了适用于 JavaScript 和 TypeScript 的 Debugger for Chrome 扩展。这可以通过访问 VSCode 市场并搜索 `Debugger for Chrome` 来完成。 #### 配置 launch.json 文件 创建或编辑 `.vscode/launch.json` 文件来定义启动配置项。对于 Vue CLI 创建的应用程序来说,通常会有一个 Webpack 开发服务器正在运行,因此需要指定连接到该服务器的方式。下面是一个典型的配置例子[^1]: ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", // 这里应匹配开发服务器的实际地址 "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" } } ] } ``` #### 设置断点 打开想要调试的源文件,在代码行号左侧点击以添加断点。当应用程序执行到达这些位置时将会暂停,允许检查变量状态和其他信息。 #### 启动调试器 通过按 F5 或者从顶部菜单栏选择要使用的配置名称(如上例中的 `"vuejs: chrome"`),即可开始调试过程。浏览器窗口应该自动打开,并加载应用;如果之前设置了任何断点,则会在遇到它们的时候停止下来供进一步分析。 #### 使用控制台功能 一旦进入断点处,就可以利用集成终端内的 Node.js REPL 对象进行交互式编程测试,也可以直接查看当前作用域内可用的对象及其属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值