9

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 ?

Matthew Barbara
  • 2,888
  • 2
  • 17
  • 30
Alexander Solonik
  • 8,718
  • 13
  • 56
  • 133
  • 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. – Dave Newton Jun 28 '18 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. – Derek Jun 28 '18 at 22:03
  • @DaveNewton Thanks i kind of get the idea , i believe the right word to use was "component" – Alexander Solonik Jun 29 '18 at 05:54
  • Good Question +1, checkout my answer!! – Harshal Y. Jul 06 '18 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. – Alexander Solonik Jul 07 '18 at 11:33
  • Unfortunately `react-beautiful-dnd` does not have much documentation and I think they are writing one. I will update my answer with few helpful links hoping that would help you. – Harshal Y. Jul 09 '18 at 06:14
  • I have updated my answer please check. – Harshal Y. Jul 09 '18 at 06:29
  • I have added how to debug `react-beautiful-dnd` step by step. – Harshal Y. Jul 09 '18 at 06:32
  • @AlexanderSolonik I think you should accept my answer now. :) – Harshal Y. Jul 26 '18 at 20:01

3 Answers3

5

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.
Harshal Y.
  • 4,143
  • 1
  • 15
  • 39
4

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.

Matthew Barbara
  • 2,888
  • 2
  • 17
  • 30
3

How do I debug Node.js applications?.

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

Raj Kumar
  • 1,337
  • 12
  • 18