How to debug a react.js library

Question

I have been using react for about a year now and i recently wanted to delve into react-beautiful-dnd. I've built plugins for vanilla js and jQuery in the past , but i am not to sure about how to go about building a react.js plugin or even debug it. i am more interested in debugging this plugin and seeing how it works more then anything , so how exactly do i go about doing it ?

Typically with a JS plugin, its mostly one file , so a console.log inside each function would give you a clear enough understanding of why and when a certain function is triggered , how would you go about doing the same with a react.js plugin ?

Answer 1

How do I debug Node.js applications?.

This has quite a few answers on how you can go about debugging your react application.

Answer 2

There are multiple ways to debug.

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

Well, I use a lot of well place console.log, console.dir and util.inspect statements throughout my code and follow the logic that way.

---

react-beautiful-dnd

Unfortunately there is not much documentation and do-how thing for given topic. But here is what I found helpful. you can follow this link for Quick start guide: https://github.com/atlassian/react-beautiful-dnd/issues/363

• The codesandbox examples from the docs: https://github.com/atlassian/react-beautiful-dnd#basic-usage-examples
• Sample Project: https://github.com/jacobwicks/rbdnd-2-list-example

All Examples

Basic usage examples

We have created some basic examples on codesandbox for you to play with directly:

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

---

To Debug any Library:

Here's how you can debug that library. This is the most basic method.

• Install it.
• Check what you are using and what you need to debug.
• Find that method in the node_modules.
• Check if that method has any declaration in the code.
• If yes put some console logs and see if they get printed on console.
• Then check console for your logs.
• Carry on the process of console logs until you get what you are looking for.

Answer 3

You have to find library's function you want to debug in node_module and console.log from there. You may need to console.log the parsed file usually found in node_module/plugin/lib or node_module/plugin/dist rather then the .jsx file in node_module/plugin/src.