VSCode配置TypeScript的断点调试（详细步骤）

最新推荐文章于 2024-06-28 22:54:10 发布
最新推荐文章于 2024-06-28 22:54:10 发布
阅读量3k 收藏 3
点赞数 2
分类专栏： bug调试 文章标签： vscode typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwjdj/article/details/122513184
版权
本文详细介绍了如何在VSCode中配置TypeScript的断点调试，包括准备ts文件、添加和编辑配置文件、安装所需包以及解决可能出现的错误，帮助开发者顺利进行TypeScript项目的调试工作。
摘要由CSDN通过智能技术生成

1、准备要调试的ts文件

在这里插入图片描述

for(let i: number=1;i<10; i++){
   
  console.log("当我唱起这首歌");
}
<
最低0.47元/天 解锁文章
杏黄的三叶草
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VsCode 中的 TS断点调试
weixin_44908855的博客
11-10 4762
1. 配置步骤 第一步：准备要调试的ts文件 新建 a.ts 文件，作为要调试的ts文件console.log('1 准备开始执行 for 循环') for (let i: number = 1; i <= 3; i++) { console.log('...一锅装不下') } console.log('2 for 循环执行结束') 第二步：添加调试配置 打开调试窗口：点击左侧活动栏倒数第二个按钮（Debug） 生成默认配置：点击DEBUG后面的下拉框，选择添加配置 修改配置内容如下
VSCode中使用断点调试typescript
qq_20867249的博客
05-26 2039
VSCode中使用断点调试typescript nodejs服务器，使用typescript作为开发语言，苦于测试时频繁编译和重启。你还在为这种糟糕的测试过程烦恼么？试试这篇文章介绍的方案。 1.ts-node npm地址：https://www.npmjs.com/package/ts-node ts-node是一个很好用的工具，在npm上已经有四百多万的周下载数。它是一个支持在nodejs环境下直接运行typescript源代码的工具。 安装： yarn add ts-node -d -s 这里演示为
VsCode：配置TypeScript开发环境
最新发布
ChinaDragon10的博客
06-28 2008
VsCode：配置TypeScript开发环境
typescript断点调试，用chatGpt也走了不少弯路，最终换了思路才成功
施天助的专栏
07-08 567
换着方式问gpt，它也已经反反复复的回答差不多的内容了，这时可以考虑换思路了。并且关键一点是进一步学习一点知识，并用对比思维提问自己:如上面的可以dev运行跑起项目，断点调试却不行，那么就可以了解一下为什么dev行我本来还想着了解完再看怎么结合调试配置的（就像以前调试nodejs时那样），但gpt给的解释已经足以启发我找到跟dev对应的调试配置了，于是我按它给我的话提炼丢回去给它，并得到我想要的结论。
vs code ts运行、断点调试解决方案
xuelang532777032的博客
05-22 2009
​ 1、解决ts运行和断点调试问题 2、ts-node : 无法加载文件 C:\Program Files\nodejs\ts-node.ps1,因为在此系统上禁去看这篇===》ts-node : 无法加载文件 C:\Program Files\nodejs\ts-node.ps1,因为在此系统上禁_雪狼之夜的博客-CSDN博客3、步骤跟紧，不然错一步就不行！！！！！
使用VSCode打断点debug javascript / typescript
胡聊前端的博客
11-28 3255
我们经常在浏览器的devtools中使用debug工具去调试代码，那么如果我运行的是Nodejs，也就是运行环境是nodejs, 那么应该如何debug打断点呢？ 其实VSCode已经内部集成了调试工具，专门针对nodejs运行环境的，如果你需要debug其他的运行环境，你还需要安装对应的插件。 以上是一些插件，可以根据选择自行下载，本次只是针对于Nodejs。VSCode已经内部集成了。 使用起来也很简单，点击最左侧的bug的图标，会显示如下三个按钮。此处我新建了一个debug.js的文件，并打了一个断
设置 VSCode+Vite+Vue3+ts 的断点调试
weixin_41245990的博客
06-21 1796
当前，Vite+Vue3+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，是比较流行的前端技术之一。如何在vscode中 调试 Vite+Vue3+ts 的代码呢，今天我们一起来进行配置。首先，我们先配置ts的调试环境，再来配置Vue3的调试环境。
Angular2使用vscode断点调试ts文件的方法
08-28
本文详细介绍了使用 VSCode 断点调试 Angular2 项目中的 TS 文件的方法，包括环境配置、安装 VSCode for Chrome 插件、生成 launch.json 文件和启动断点调试等步骤。通过这篇文章，读者可以轻松地使用 VSCode 断点...
vscode创建可调试,热加载的TypeScript+Koa工程.docx
10-25
在本文中，我们将详细介绍如何从零开始创建一个可调试、支持热加载的 TypeScript + Koa 工程。这个过程涉及到的主要技术栈包括 TypeScript、Koa 框架、Node.js 环境以及 Visual Studio Code (VSCode) 开发工具。 ...
vscode配置C、C++环境详细教程.pdf
03-27
### VSCode配置C/C++环境详细教程 #### 一、VSCode简介 **Visual Studio Code**（简称“VS Code”）是由微软公司在2015年4月30日的Build开发者大会上正式发布的一款跨平台源代码编辑器。它支持在Mac OS X、Windows...
vscode-mocha-ts-config:使用Visual Studio Code调试Mocha测试用例的配置
05-13
项目"vscode-mocha-ts-config-master"提供了一个完整的配置示例，包括了上述所有环节，使得开发者可以快速上手并在VSCode中顺利地调试TypeScript编写的Mocha测试。通过学习和应用这个配置，开发者不仅可以提升测试...
VSCodeSetup-x64-1.19.1 安装软件以及详细配置
10-09
**VSCodeSetup-x64-1.19.1 安装软件及详细配置** Visual Studio Code（简称VSCode）是Microsoft开发的一款免费、开源的源代码编辑器，支持多种编程语言，适用于Windows、macOS和Linux操作系统。版本1.19.1是VSCode...
TypeScript在vscode中断点调试
qq_26026975的博客
12-20 4890
1.配置所需的环境 node 版本 yarn add typescript --global (安装支持ts模块) yarn add ts-node --global (安装编译ts模块，ts模块可以帮助我们无需手动编译成js，可以直接在vscode中调试) 2.构造项目 npm init 项目名称(创建项目) tsc --init (初始化tsc项目) 在执行第二步后，会生成一个 t...
vs code断点调试 typescript
叶海
10-21 726
参考:https://segmentfault.com/a/1190000010605261 打开项目 鼠标点击 [调试(D)]->打开配置->node.js 自动在项目路径下生成.vscode->launch.json,修改内容如下 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: ht...
在VSCode中断点调试.js和.ts文件
qq_34388186的博客
01-06 667
在VSCode中断点调试js和ts文件
vscode 对 typescript debug
lyzchengxuyuan的博客
03-28 647
还需要注意的是，由于 TypeScript 代码和 JavaScript 代码之间的映射关系，断点位置可能会有所偏移，此时可以使用 Source Map 功能来解决这个问题。在 Debug 模式下，打开 Debug 控制台，选择 Sources 选项卡，可以看到 TypeScript 和 JavaScript 代码之间的映射关系。4.在 VS Code 中打开编译后的 JavaScript 代码文件，设置断点，按 F5 或点击 Debug 按钮进入 Debug 模式，最后运行程序即可开始调试。
VSCode运行TypeScript
Tiny2017的博客
07-09 603
1.文档 https://www.tslang.cn/docs/handbook/advanced-types.html http://ts.xcatliu.com/ 2.步骤 全局安装ts-node包 javascript npm install typescript ts-node @types/node@* -g 直接运行自己的ts文件 tsc index.ts 然后可能会报错 可能是vscode策略受限制，那么以管理员身份重新打开vscode，到控制台依次输入： get-Execution
typescript的调试
justin_bkdrong的专栏
05-26 3847
调试typescript为什么要用 typescript安装typescript设置环境语言为汉语调试设置工作区设置修改调试信息设置build环境上代码输出代码调试界面为何要搞javascript 之类的 为什么要用 typescript 因为学习曲线。 本人从 C->C++ ，然后学了点儿python , 汇编 ,java ,lua ,对 javascript 的混乱语法实在不感兴趣。 ...
vscode初运行typescript
m0_71372639的博客
08-03 627
vscode初运行typescript---ts安装与运行
vscode如何运行并调试ts项目
05-30
在 VS Code 中运行和调试 TypeScript 项目可以通过以下步骤完成： 1. 确保你已经安装了 TypeScript 编译器和 Node.js 运行时环境。 2. 在 VS Code 中打开你的 TypeScript 项目文件夹。 3. 打开终端，进入到项目文件夹，并执行以下命令来安装 TypeScript 和 Node.js 的相关依赖： ``` npm install ``` 4. 在项目根目录下创建一个 `launch.json` 文件，用于配置 VS Code 的调试器。可以通过 VS Code 的调试面板中的“添加配置”按钮来自动生成该文件。 5. 在 `launch.json` 文件中添加一个配置项，用于启动 TypeScript 编译器并运行你的项目。例如： ``` { "type": "node", "request": "launch", "name": "Debug TypeScript", "runtimeArgs": ["-r", "ts-node/register"], "args": ["${workspaceFolder}/src/index.ts"], "cwd": "${workspaceFolder}", "protocol": "inspector" } ``` 这个配置项将使用 `ts-node` 运行时环境来编译和运行你的 TypeScript 代码，并将 `src/index.ts` 文件作为入口点。你可以根据你的项目结构和需求进行调整。 6. 在 VS Code 中打开你的 `index.ts` 文件，并在代码中设置断点。 7. 点击 VS Code 的调试面板中的“启动调试”按钮，等待编译和运行过程完成。 8. 当程序运行到断点时，你可以使用 VS Code 的调试工具来检查变量、调用栈和执行状态等信息，以便进行调试。 以上就是在 VS Code 中运行和调试 TypeScript 项目的基本步骤。如果需要更多帮助或者具体的示例代码，请参考 TypeScript 和 VS Code 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值