如何调试react.js库

Question

我已经使用React大约一年了，最近我想深入研究react-beautiful-dnd。我过去曾经为Vanilla js和jQuery构建插件，但是我不确定如何去构建react.js插件甚至调试它。我对调试该插件并了解它的工作原理感兴趣，所以我该怎么做呢？

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

Answer 1

有多种调试方法。

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

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

---

美丽的反应性

不幸的是，给定主题的文档和操作方法不多。但是，这对我有帮助。您可以通过以下链接获取快速入门指南：https://github.com/atlassian/react-beautiful-dnd/issues/363

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

All Examples

基本用法示例

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

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

---

要调试任何库：

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

• 安装。
• 检查您正在使用什么以及需要调试什么。
• 在node_modules中找到该方法。
• 检查该方法在代码中是否有任何声明。
• 如果是，请放置一些控制台日志，看看是否在控制台上打印出来。
• 然后检查控制台中的日志。
• 继续进行控制台日志的处理，直到获得所需的内容为止。

Answer 2

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

Answer 3

How do I debug Node.js applications?。

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