如何调试 react.js 库

Question

我已经使用 React 大约一年了，我最近想深入研究 react-beautiful-dnd。我过去为 vanilla js 和 jQuery 构建了插件，但我不确定如何构建 react.js 插件甚至调试它。我更感兴趣的是调试这个插件，看看它是如何工作的，那么我到底该怎么做呢？

通常使用 JS 插件，它主要是一个文件，因此每个函数中的 console.log 可以让您清楚地了解触发某个函数的原因和时间，您将如何进行与 react.js 插件相同 ?

Answer 1

您必须从那里在 node_module 和 console.log 中找到要调试的库函数。您可能需要 console.log 通常在 node_module/plugin/lib 或 node_module/plugin/dist 中找到的已解析文件，而不是 node_module/plugin/src.

中的 .jsx 文件

Answer 2

有多种调试方法。

• node debug app.js
• node-inspector
• console
• util

好吧，我在我的代码中使用了很多 well place console.log、console.dir 和 util.inspect 语句，并遵循这种逻辑。

---

反应-美丽-dnd

不幸的是，对于给定的主题，没有太多的文档和操作方法。但这是我发现有帮助的。您可以按照此 link 获取 快速入门指南 ：https://github.com/atlassian/react-beautiful-dnd/issues/363

• 文档中的 codesandbox 示例： https://github.com/atlassian/react-beautiful-dnd#basic-usage-examples
• 示例项目：https://github.com/jacobwicks/rbdnd-2-list-example

All Examples

基本用法示例

我们在 codesandbox 上创建了一些基本示例供您直接使用：

1. Simple vertical list
2. Simple horizontal list
3. Simple DnD between two lists

---

要调试任何库：

下面是调试该库的方法。这是最基本的方法。

• 安装它。
• 检查您正在使用的内容以及需要调试的内容。
• 在 node_modules 中找到该方法。
• 检查该方法是否在代码中有任何声明。
• 如果是，放一些控制台日志，看看它们是否打印在控制台上。
• 然后检查控制台中的日志。
• 继续控制台日志的处理，直到找到您要查找的内容。

Answer 3

How do I debug Node.js applications?.

这里有很多关于如何调试 React 应用程序的答案。