VSCode JS Debug 项目推荐

VSCode JS Debug 项目推荐

vscode-js-debug The VS Code JavaScript debugger vscode-js-debug 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-js-debug

项目基础介绍和主要编程语言

VSCode JS Debug 是由微软开发的一个开源项目,旨在为 Visual Studio Code 和 Visual Studio 提供一个兼容 DAP(Debug Adapter Protocol)的 JavaScript 调试器。该项目主要使用 TypeScript 和 JavaScript 进行开发,同时也涉及 HTML、CSS 等前端技术。

项目核心功能

VSCode JS Debug 的核心功能是为多种 JavaScript 运行环境提供调试支持,包括但不限于:

  • Node.js 调试:支持调试 Node.js 应用程序,包括子进程和 Worker 线程。
  • 浏览器调试:支持调试 Chrome、Edge 等浏览器中的 JavaScript 代码,包括 Web Workers 和 Service Workers。
  • VS Code 扩展调试:支持调试 Visual Studio Code 的扩展。
  • React Native 调试:支持调试 React Native 应用程序。
  • Blazor 调试:支持调试 Blazor 应用程序。
  • WebView2 调试:支持调试 WebView2 应用程序。

此外,VSCode JS Debug 还提供了丰富的调试功能,如自动附加调试、性能分析、网络视图、条件断点等。

项目最近更新的功能

最近,VSCode JS Debug 项目更新了以下功能:

  • WebAssembly 调试:支持使用 DWARF 符号调试 WebAssembly 二进制文件。
  • 终端中的 Node.js 调试:支持在终端中运行 Node.js 进程时自动附加调试。
  • 性能分析支持:在 VS Code 中直接捕获和查看性能分析数据,包括 CPU 分析、堆分析和堆快照。
  • 网络视图:支持查看浏览器目标和 Node.js 22.6.0 及以上版本的网络流量。
  • 高级重命名支持:当使用工具生成源映射时,调试器会自动映射重命名的变量,并在所有显示视图中重写评估请求。
  • 条件异常断点:支持根据错误对象过滤要暂停的异常。
  • 排除调用者:支持在特定调用帧中排除断点。
  • 步进目标:支持在多个调用或表达式中选择特定的表达式进行步进。

这些更新进一步增强了 VSCode JS Debug 的功能,使其成为开发者在多种 JavaScript 环境中进行高效调试的强大工具。

vscode-js-debug The VS Code JavaScript debugger vscode-js-debug 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-js-debug

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

### 设置和使用 VSCode 调试 Vue 项目 #### 配置 `vue.config.js` 对于采用 Vue CLI 3 构建的项目,通过修改 `vue.config.js` 文件来增强调试体验。具体来说,在该文件内添加或调整如下配置: ```javascript module.exports = { configureWebpack: { devtool: 'source-map' } } ``` 此设置确保生成详细的源码映射信息,有助于更精确地追踪代码执行路径[^1]。 #### 编辑 `launch.json` 为了使 Visual Studio Code (VSCode) 支持对前端应用的有效调试,需创建或编辑 `.vscode/launch.json` 文件。一个典型的配置项可能看起来像这样: ```json { "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", // 根据实际情况更改端口号 "webRoot": "${workspaceFolder}/src" } ] } ``` 上述 JSON 片段定义了一种名为 “vuejs: chrome” 的调试模式,它会在启动时自动打开指定 URL 并加载对应的 Web 应用程序。 #### 启动调试过程 完成以上准备工作之后,可以通过按下键盘上的 F5 键或是点击位于左侧边栏顶部附近的绿色箭头图标来触发调试流程。此时浏览器将会被唤起,并访问本地服务器地址(通常是类似于 `http://localhost:5173` 这样的链接),同时允许开发者利用断点等功能深入探究应用程序的行为逻辑[^2]。 当选择了之前在 `launch.json` 中设定好的配置名称——即这里的 `"vuejs: chrome"` ——再点击那个显眼的大号绿三角形按钮后,则可以顺利开启一次完整的 Chrome 浏览器实例用于测试目的[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤怡唯Matilda

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值