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 ?
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:
Simple vertical list
Simple horizontal list
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.
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.
How do I debug Node.js applications?.
This has quite a few answers on how you can go about debugging your react application.
Related
I've searched throughout google about this question and I had no success...
I want to work on a serverless plugin fix, but I don't know how to attach the process to debug the code.
Currently, I'm using vscode and the plugin was developed using nodejs + typescript.
Does anyone have any tip or article explaining how to do that?
As every other process, that you want to debug, you need to run it and somehow connect the debugger to it.
You need to remember, that Serverless Framework is written in JS/TS, so it runs in Node.js. So you can debug it quite easily, if you are developing your Lambdas in Node.js, as it's quite common environment.
How to do it using Jetbrains/Webstorm/IntelliJ
Go to your node_modules directory and find the source code of the plugin, that you want to debug.
In the source code place the breakpoint.
Now Create a new "Run configuration" in IDE for NPM, that should be similar to mine:
4. Make sure you've chosen the correct package.json!
5. Now simply start debugging, like you normally do, but choose the run configuration, that you've just created.
In my example I'm using package script from package.json, but it could be also any other script, that triggers serverless deploy or serverless print in the end.
And that's it! Breakpoints should be triggered normally, like when you debug your own JS code.
I am developer with poor experience, however with strong academic CS background.
So please be patient where I am wrong somewhere.
As far I know, typescript can be executed on JS server and it works in this way in my case. Namely, I execute e2e tests with protactor (angular test framework).
I would like to debug it and check what methods was called during such execution on nodejs. To give you more details, I would like if (and possibly parameters) was invoked
waitForAngular(rootSelector, callback) method.
I know that it is possible to dump a variety of traces and debugging info from JVM, however I have no idea how can I do it with nodejs in my specific case.
Could you help me, please?
Around where you have your calls to waitForAngular (or any other code that you want to check), add a console.trace(), which will display a stack trace at that exact line of code.
You can read more about console.trace() and other console API methods at this document by the Chrome project (node.js uses the JS engine that Chrome uses): https://developers.google.com/web/tools/chrome-devtools/console/api#trace
You can sprinkle debugger statements in your code to stop execution which will allow you to step through your code. Similarly, you could start your Node process with the --inspect-brk argument to use Chrome DevTools to step through your code.
I've just started my IT degree and I'm a beginner to the use of APIs (and forums like this) so I am truly sorry if my question is to vaguely explained or if it is just plain stupid :), on top of that I'm not a native English speaker :P. Okay, so I'm trying to use Google trends' api which I installed in my server with putty by using sudo npm install google-trends-api. (it can be found here https://www.npmjs.com/package/google-trends-api#installation) As I undestand it, this is a server side api so the scripts that I write with the methods provided for this api will not run on an explorer as normal js files do. There is an example that makes use of the API that I found on the page which is as follows
var googleTrends = requite('google-trends-api');
googleTrends.hotTrends('US')
.then(function(results){
console.log(results);
})
.catch(function(err){
console.log(err);
});
this outputs a list of 20 items on the console when I use it on node.
I would like to know if there is a way to assign those results to a variable and then use that variable in a normal javascript script inside a html file. I do not know anything about node.js and the like, and I would like to actually do some research instead of asking here but I was going to use a different approach to acquire such information but now I've had to change my plans and do not have enough time and given I consider this is a fairly easy problem to resolve (maybe?) I would really appreciate it if someone could walk me through the basics of each step. THanks :) and have a nice day.
Your question is quite broad. Node.js is Chrome's V8 engine bundled with some libraries to do I/O and networking. This enables us to JavaScript outside of the browser and to create backend services or servers in general (in your case). I hope that you are aware of this difference :)
The first thing that you have to do, is to have a look at express.js and to create a simple server. It will not be more than 20 lines of code. Then you have to enrich this with more stuff like a template engine (handlebars.js, jade etc). You have to enable the server to serve static files that will be finally your js, css and image files. Creating this simple server you will be able to serve simple html page in the first place. On top of that you should have the client side javascript that you have to write and now you can use the module above. Unfortunately, you are not able to use this module directly on a javascript file that you will write. To be able to use this module you have to transcompile this thing into javascript that browser understand*. Remember that browser does not understand the require statement and some old browsers possibly will have issues with the promises that this module is using. These are the things that should be compiled. You have to use a tool like browserify for this and the compiled file that this will extract it must be included in the scripts of your html page.
Maybe there are quite a lot of concepts that you are not aware of or you don't understand them but spend a bit of time to understand them.
P.S.: I' ve replied under the assumption that google-trends-api module does not use things that are specific to node.js like the file-system for example.
After being completely confused and googling tutorial after tutorial, reading books about cucumber that do not cover the JS implementation, I got over the fear of flames and decided to post my question here.
I have setup Cucumber-JS on my box, running fine. I use CoffeeScript, because I am lazy. I got my features folder, have my .feature written. Got my step definition and figured out that Cucumber JS requires a 'World' thingie to be anything near useful. I also discovered just moments ago, there can be some env.js tweaking to make this setup find the rest of my app.
I am not building a web based app, as I want some core logic to be worked out first. Where my trouble starts is the part how I am supposed to continue now.
I have a folder called 'lib' in the project root. Inside it, it is going to have my JS app, which I will eventually be running through NodeJS.
What changes do I have to make to env.js, world.coffee and mystep definition to be able to test my code I am developing in lib/myapp.coffee?
Thank you!
Eventually, I found out this is no Cucumber thing. It has to do with NodeJS and the way it handles modules. I eventually ended here:
http://www.sitepoint.com/understanding-module-exports-exports-node-js/
I have a difficult question that needs some answering, i have seen some projects where
the application runs a socket in a browser that has a console like format that the user can run for their node.js module...
If the actually calling a function or script is impossible from the web side,
i think it would be nifty to just see the console logs in the window.
If any advice could be shared, that would be amazing!
Thanks :)
Yes, there are several projects that do this. Weinre is very commonly used. You can look at its source code to see how it does it.
If I were to build it from scratch, I would utilize Socket.IO. Send the command, return the result.