如何调试react.js库

Question

我已经使用反应大约一年了,我最近想深入研究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更确切地说，需要..jsxnode_module/plugin/src

Answer 2

有多种调试方法.

• node debug app.js
• 节点检查
• console
• util

好吧,我用了很多很好的地方console.log,console.dir并util.inspect声明在我的代码,并按照逻辑的方式.

反应 - 美丽 - 免打扰

不幸的是,对于给定的主题,没有太多的文档和做法.但这是我发现有用的.您可以点击此链接获取快速入门指南:https://github.com/atlassian/react-beautiful-dnd/issues/363

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

所有例子

基本用法示例

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

1. 简单的垂直列表
2. 简单的水平列表
3. 两个列表之间的简单DnD

调试任何库:

以下是调试该库的方法.这是最基本的方法.

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