前言
在前端开发中，我们经常会遭遇 JavaScript 代码失效的问题。出现这种情况时，我们需要一个能够帮助我们追踪代码失效问题的工具。unravel-repl 就是这样的一个工具。它可以帮助我们检查代码问题，识别问题点，并提供给我们解决办法。
本教程将向你介绍如何使用 npm 包 unravel-repl，以便快速定位和解决代码问题。
安装
在开始之前，请确保你已经在本地安装了 Node.js 和 npm。
全局安装
可以通过以下命令进行全局安装：
npm i -g unravel-repl
局部安装
如果你更喜欢在项目中使用 unravel-repl，可以通过以下命令进行局部安装：
npm i unravel-repl
使用
CLI
可以在终端中直接运行以下命令来启动 unravel-repl：
unravel运行此命令后，你将会看到以下内容：
Unravel REPL server listening on http://localhost:4000
此时，unravel-repl 会监听 4000 端口，等待连接。如果你想要使用其他端口号，请使用 --port 参数。
连接 unravel-repl：
在 Web 浏览器中打开以下链接：
http://localhost:4000
你就可以连接到运行中的 unravel-repl。
API
在 Node.js 项目中使用 unravel-repl：
const unravel = require('unravel-repl') const server = unravel.createServer() server.listen(4000, () => { console.log('Unravel REPL server listening on http://localhost:4000') })
运行此代码后，unravel-repl 将开始监听 4000 端口。现在，你可以使用以上链接来连接到该端口。
示例代码
以下是一个简单的示例代码，它将演示如何使用 unravel-repl 来检查并解决代码问题：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------------- -- ----- -------- - --- ----------------- ------- -- - ------------------- -- ----------------------------- -- - -------------------------- -- ----------------------------- -- - -------------------------- -- ----------------- -----------展开代码
请注意，这段代码中存在一个错误。promise2 将返回 "Failure!"，但是我们从未处理它。让我们使用 unravel-repl 来发现和解决这个问题。
使用 unravel-repl
安装并运行 unravel-repl。
在 Web 浏览器中连接到 unravel-repl。
进入查看代码页面。
复制示例代码到文本框中，点击“Analyze”按钮。
点击“Summary”标签页。
你现在将看到一个摘要，其中指出了代码的两个错误。在这个例子中，有一个未处理的 Promise rejection。我们将主要关注这个问题。
点击“Promises”标签页。
你将看到 Promise 链的详细信息。在这个例子中，可以看出 promise2 的 Promise rejection 未被处理。我们将在下一步中修复这个问题。
回到“代码”标签页。在此标签页中，你将看到代码。
现在，请修改代码，处理 Promise rejection：
-- -------------------- ---- ------- ----- -------- - --- ----------------- ------- -- - ------------------- -- ----- -------- - --- ----------------- ------- -- - ------------------- -- ----------------------------- -- - -------------------------- -- -------------- --------------- -- - -------------------------- -- --------------- -- - ---------------------- ------------ -------------- - - ----------------- -----------
展开代码再次点击“Analyze”按钮，然后返回“Promises”标签页。你将看到 promise2 现在正确地处理了 Promise rejection。
现在，我们已经使用 unravel-repl 定位并解决了代码问题。我们希望此教程使你更加熟悉 npm 包 unravel-repl，以便能够有效地调试问题并解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf781e8991b448e6bfd
