在前端开发中，debug 是必不可少的过程，而 ti-debugger 是一个非常方便的调试工具，它是 Node.js 上的一个命令行工具，可以帮助我们调试 TypeScript 项目。该工具提供了嵌入式了浏览器端调试工具的 Node.js 应用程序的远程 JavaScript 调试功能，让我们可以快速定位和解决问题。
安装
在使用 ti-debugger 前，我们需要先安装该 npm 包。可以使用 npm 安装：
npm install ti-debugger
也可以使用 yarn 安装：
yarn add ti-debugger
使用
启动 ti-debugger
启动 ti-debugger 命令：
ti-debugger --port <端口号>
其中 <端口号> 为可选参数，默认为 9229。
启动后会在命令行中输出调试工具的 URL 地址，以及指示该应用程序正在等待调试器连接的消息。
连接 ti-debugger
我们需要在浏览器中打开调试工具的 URL 地址，然后可以开始在代码中调试了。
调试 TypeScript 项目
如果我们需要调试 TypeScript 项目，则需要额外安装 ts-node：
npm install -g ts-node
然后，我们可以将调试命令更改为：
ti-debugger --port <端口号> --require ts-node/register
其中 ti-debugger 命令将 ts-node 注册为一个启动响应的预加载器，这样在调试时才能处理 TypeScript 文件。
在代码中设置断点
在我们需要调试的代码中，使用 debugger 关键字设置断点即可。例如：
function calculatePrice(price, discount) {
debugger;
return price - (price * discount);
}
calculatePrice(100, 0.2);在运行代码时，调试工具会在 debugger 关键字处进行暂停，等待我们进一步的调试操作。
调试命令
ti-debugger 提供了许多命令，使我们可以在调试过程中进行多样化的操作，例如：
cont: 继续执行代码直到下一个断点或正常执行结束next: 执行下一行代码 (如果该行包含函数调用，则会将整个函数作为单个步骤执行)step: 进入函数体内；如果当前行不是函数调用，与next命令相同out: 退出当前函数pause: 暂停执行代码backtrace: 显示当前函数的调用堆栈watch(expr): 监视表达式，在执行每个单步操作时自动计算其值
监听代码变化
ti-debugger 还提供了监听代码变化的功能，可以在代码发生变化时，立即重新加载代码和调试器状态：
ti-debugger --port <端口号> --watch
在 WebStorm 中使用
如果使用 WebStorm 开发，我们可以直接在 WebStorm 中启动 ti-debugger，然后设置远程调试配置即可。具体步骤如下：
- 在 WebStorm 中启动 ti-debugger：
ti-debugger --port <端口号>
- 在 WebStorm 中创建一个新的远程调试配置：
Run -> Edit Configurations -> + -> Remote -> Name: <名字>, Port: <端口号> - 在代码中设置断点，然后运行远程调试配置。
总结
ti-debugger 是一个非常方便的调试工具，可以帮助我们定位和解决前端开发中的问题。本文介绍了 ti-debugger 的安装、使用、设置断点、调试命令、监听代码变化，以及在 WebStorm 中使用 ti-debugger。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e081e8991b448e0616