13

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 ?

Improve this question
9
  • 1
    I'm not quite sure what you mean by a "plugin" here. The notion that things are "mostly one file" may have been true 5-10 years ago, but that has not been the case for some time, unless it's something trivial. Debugging is the same as with anything else; set breakpoints. Note that this is quite a bit more difficult when you're dealing with transpiled JS, so you'd probably want a source map. Commented Jun 28, 2018 at 21:42
  • find the project on github (if it's there) and look at the un-transpiled source. you can always fork or clone the project locally and run the build/test commands as well. Commented Jun 28, 2018 at 22:03
  • @DaveNewton Thanks i kind of get the idea , i believe the right word to use was "component" Commented Jun 29, 2018 at 5:54
  • Good Question +1, checkout my answer!! Commented Jul 6, 2018 at 11:51
  • @CaptainJackSparrow Thanks , i am looking for a more step by step breakdown about how would you go about debugging react-beautiful-dnd ... a bit more of a breakdown ! Thanks though, iám still trying to figure that out. Commented Jul 7, 2018 at 11:33

3 Answers 3

Reset to default
6
+50

There are multiple ways to debug.

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

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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

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.

Improve this answer

Comments

3

How do I debug Node.js applications?.

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.