How to debug Nodejs/Expressjs(MEAN stack) [duplicate] - javascript

I'm looking for effective way for step-by-step debugging NodeJS server code. At this moment I use dozens of console.log()'s and it's extremely hard. The perfect tool is one that would allow me to check the values of every variable in stack and trace my program line by line. Prefered OS = MacOS/Linux. Is it possible?

Basically, Node.js is built on top of V8, so its debugging capabilities are also built on top of V8's debugging capabilities.
V8 has an included debugger which can be accessed via TCP on port 5858.
So basically all you need is a frontend which is able to connect to port 5858 and talk V8's debugging protocol.
One option is to use node-inspector which basically provides a debugging UI in your browser. Unfortunately, it does only work with Google Chrome and Apple Safari (which for me is no problem, but there may be others ;-)).
Another option is to use a plugin for Eclipse.
And, last but not least, the built-in debugger of Node.js (which always reminds me of MS-DOS's edlin) is also just a front-end for this TCP debugger, just a built-in one.
And of course, there are much more options ... these three were just the first three ones that came to my mind ;-)

How about this?
You can try to test for Nodeclipse version 0.2.0 beta.
http://www.tomotaro1065.com/nodeclipse/
It will help you to debug node apps easily.
GENERATING OF EXPRESS PROJECT
Select the [File]-[New]-[Project] menu.
Select [Node]-[Express Project], and push [Next] button.
Enter [Project name], and push [Finish] button.
DEBUGGING
Open the JavaScript source files that you want to set breakpoints.
Double-click on the ruler at the left end of the line you want to set a breakpoint.
If you want to remove a breakpoint, double-click on the ruler again.
Select the main source file of Node Application on the Project Explorer,
open the context menu by right-clicking,
select the [Debug As]-[Node Application] menu.

Use node-inspector to provide the node debugging environment you're looking for. It's fantastic.

Check WebStorm. It is a great IDE, and also you can directly run your nodejs code, or connect to a debugging-enabled node process already running. In both cases, WebStorm provides what you are looking for: trace program execution line by line and on every line check the state of every variable.

Try nodeunit npm module for testing nodejs server side codes.

Even though question is very old, there is a awesome IDE from Microsoft "Visual Studio Code" which is developed in intention with Javascript (Typescript) which is capable of debugging Node JS projects
Checkout this link https://code.visualstudio.com/docs/nodejs/nodejs-debugging

node inspect built-in CLI step debugging
It took a while, but at some point Node finally added built-in debugging:
node inspect main.js
and this leaves you at the first line of the program.
Navigate with:
n step to next line
s step into function
c continue
o step out
h get help
In order to view variables or inject code, you need to first enter REPL mode with:
repl
and then you can run commands as in a node interactive session, e.g. to see the value of a variable just write the variable name:
myvar
It is awkward to have to type those four characters repl all the time, but I don't know any alternative.
You can also add a debugger statement to where you want to break in the program after a c:
const i = 1;
debugger;
i = 2;
Related question: How do I debug Node.js applications?
Tested in Node.js v10.15.1, Ubuntu 19.10.

Related

VS Code: How do I synchronize workspaces between multiple systems?

Update:
It turns out that what I really wanted was to be able to do remote development on my laptop, and - if I also did something local on my robot, to have the changes show up on my main development system.
Ref:
This substantially similar question was asked about 10 months ago and has received no replies since then.  As there have been a lot of improvements in VS Code since then, (and since Stack Overflow discourages "Me Too!" replies), I have decided to re-ask the question in hope that someone will notice it and reply.
Viz.: https://stackoverflow.com/questions/60034690/how-to-sync-workspace-folder-beween-host-and-remote-target
Environment:
A Windows 10 system running VS Code, both current as of this instant date.
A Raspberry Pi based robot, (a GoPiGo3) that has the remote development using SSH software installed that allows my Windows 10 system to communicate with it via VS Code.
I have made an exact copy of the workspace environment, in its entirety, including the enclosing workspace folder, from the Windows 10 system to the robot, using FileZilla.
My previous workflow was to develop on the Windows box, transfer to the robot, run on the 'bot using Thonny, note any errors and either fix them in-place, (within Thonny), and transfer back to the Win-10 machine or fix within Windows 10 and transfer back to the 'bot.
"Clumsy" is a masterpiece of understatement.
Now that I have set up Remote Development on the bot, I believe I can escape most of that.
What I notice is that within the robot's copy of the workspace, most, (if not all), of the files are now either "modified" or "untracked" and updating my GitHub repo from the 'bot will cause all kinds of confusion.
What I want is the ability to develop on either platform seamlessly. (i.e. Changes made on the one are automagically reflected on the other when next connected.) And I want to do this in such a way that the commit and/or change status is accurately reflected on both machines.
I could go into a long explanation as to why this is useful to me, but this question is long enough already.
Any help would be gratefully appreciated.
OK people, I think I have this figured out.
Lesson #1:
It turns out that my original problem was actually more about workflow and "what's the best way to do a specific something", as opposed to how to do dual-development.  So, in essence, I was asking the wrong question.
Lesson #2:
You do not have to install the entire VS Code IDE on the remote device.
That's the original mistake - I misunderstood "install VS Code on the remote device" and I installed the IDE itself in both locations.
The result was that it slowed down the robot so much that it was unusable.
Having more than one instance of the VS Code IDE installed created confusion about what was happening where.
Lesson #3:
I did not realize that VS Code can install a small server module, (like a shim of sorts), and do some SSH magic on the remote device that allows VS code to use the remote device as if it were local to your main computer or laptop.
What you do is open VS Code on the local device, and then tell it you want to connect to a remote device for development.
Once you have that sorted out - this is very site specific and a web search is your friend - you can edit code and even execute code from your local computer and have it run on the remote device as if you were physically there.
In my case, (after experimenting with several different ways to work on my projects), I discovered that placing the VS Code IDE on my Windows based laptop and the "server", (shim) module on the robot, (with the appropriate extensions installed), provides an almost seamless environment that doesn't appreciably load the robot's processor - a Raspberry Pi 4.
Make sure the workspace on the local computer is fully up to date on GitHub (which is where my project repo is located).
Install the requisite VS Code remote development modules and make sure you can communicate with the remote system.  Exactly how to do this is specific to your environment.
Either "sync" or "clone" the relevant GitHub repo down to the device using the remote dev tools in VS Code as if it were your local box.
Note that this is very system and site specific.  VS Code does a good job of helping walk you through this, and a web-search will rapidly clear up any lingering questions or issues.
Eventually you will have a fully up-to-date version on the remote platform.
When this is done, you won't have to mess with manually syncing code as the code is already on the 'bot. All you do is edit code on your local machine, (my Windows laptop for example), and run it from VS Code.
An additional advantage is that if you have to duplicate or clone the robot's workspace, or restore the workspace from a backup, (you DO have your projects in a separate folder don't you?), all the "vscode" and "git" information is located there too and you can re-open your project after moving it with everything intact.
Additionally, if you have VS Code set up on different machines in different places, it might be possible to connect to the same server endpoint and have the same environment available.
(i.e. One installation on a desktop at work and another installation on a laptop for use on the road, (or while quarantined), both connecting to the same server endpoint.)
Note: I have not done this personally and it might require further research.
What I ended up doing, workflow wise, is that I do the lion's share of the development within VS Code,executing remotely on the robot itself.
Sometimes, if I want to try a quick and dirty fix, I'll "break the forth wall" and open an editor directly on the 'bot itself and it automatically shows up as "modified" within VS Code.

Can Javascript detect UWP?

I'm building a little game using NodeJS and EaselJS that runs great in-browser, locally hosted. I downloaded Visual Studio and started the process of creating a UWP from it so that I can play on my Xbox One. Visual Studio is basically just the middle man, as I am using the "Start Page" and pointing it to my locally hosted web server to create the app, rather than try to re-invent the wheel.
I'd like to take advantage of some of the Windows.UI functions ONLY WHEN it's run as a Window/Xbox app, specifically the Overscan ability for display on a TV. So far I've been unable to get the JS to detect the execution type. I've added
if (Windows)
{
Windows.UI.ViewManagement.ApplicationView.getForCurrentView() ...
}
but when I run it in a regular ol browser I get a Reference error of Windows being undefined. I also tried
if(typeof Windows !== 'undefined'){....
which makes the browser version work fine, but deployment tests in Visual Studio don't see it either (I put a debug console output to make sure).
Is it possible to have a best of both worlds execution, or do I need to go full bore and develop a specific version of the game in VS to get what I want?
Figured it out. The if(typeof) solution is partially correct, so points there Shawn. What I was failing to do is include WinRT Access to the URI in the appxmanifest inside of Visual Studio. Once I told it to actually look for Windows on the app side, I'm getting my debug output and the screen is scaling appropriately. Thanks for having a look see anyway!
I can think of two possible options. First check the type of the object:
if(typeof Windows != 'undefined')
{
}
Second, declare a variable Windows before your check(s). It's ok to redeclare a variable in javascript. It won't override the original.
var Windows;
if(Windows)
{
}

mac os x python/JavaScript IDE where I can use break points

I looking for python/JavaScript IDE where I can put breakpoints. Currently I'm using coderunner but I can not put break points. I'll really appreciate you recommendations
I'm not an expert on Python, but I do work as a web developer and use JavaScript regularly. For that side of things, probably the easiest way is to use Chrome/Firefox debugger tools. You can do this manually by finding the line of code in the console and clicking (F12->Sources tab->Content scripts->desired script), or using the 'debugger' statement to toggle debug mode (F12->Console tab->type 'debugger' then return) and step through to what you need.
Additionally, if you're looking for an actual IDE, the only thing I've found online is the following. Here's the relevant part of that article. I've never used it (and probably never will), but there it is all the same.
Webstorm by IDEA supports setting breakpoints in the IDE. This requires launching the JavaScript debugger from IDEA. It must be configured in advance so it understands how to map JavaScript on the development server to JavaScript files in your environment. IDEA will automatically install a Chrome or Firefox plug-in to facilitate. This is pretty new technology and can be touchy.
I use PyCharm. It's a heavyweight IDE, so expect more features than you probably want if you're just getting started. It has a very good integrated debugger. You'll be able to break into both your Python and Javascript. Further, you'll see a pretty nice productivity jump with all the editing support like auto complete and intellisense. My advice is to stick with print() and logging as long as you can. For me getting a firm grasp of packages, python environments, virtualenv, command line tricks and git all before committing to the PyCharm IDE helped me adopt it with more confidence I was getting the value of all the integration.

Debugging Javascript in Visual Studio (or other JS debugger)

I have a .js file that normally gets executed by cscript.exe (i.e. is not run in the browser and cannot be run there).
I know, that I can feed cscript.exe the //X parameter in order to get asked for a debugger to choose. Ok. That's fine.
I select "Visual Studio 2005 Debugger", IDE comes up, execution stops on the first line. Fine.
Script terminates (or I terminate it), I edit something and want to debug it again.
Simple thought would be just to hit F5 and run the debugger again. But this doesn't work. VS just tells me that it couldn't find any debugging symbols in cscript.exe:
What now? Starting cscript.exe from the command line again for each debug run is quite cumbersome in my opinion.
Is there a way to simply debug the script with VS? Also hints for other debugging tools would be appreciated.
Edit:
The answer of t0nyh0 is pretty close. I create a dummy console application, compile and the debugger comes up. However, two things are not perfect
cscript.exe always asks for the debugger to use (which instance of VS).
Could this be overcome by specifying a certain debugger instance directly in the command line?
In order to fire a post-build event, there have to be some modifications in the sources. Currently, I simply add/delete a blank line to trigger building of my dummy project.
Is there a way to always execute the post-build script, even if nothing has changed?
There might not be a way to attach the debugger to cscript.exe itself, but you may be able to create a post-build event that runs a batch file that executes the cscript.exe //x myScript.js command so that every time you build, it executes for you automatically.
See this for more information on post-build events: http://msdn.microsoft.com/en-us/library/ke5z92ks(v=vs.80).aspx
While not a debugger tool, you should consider using a JavaScript testing framework for Visual Studio, such as Chutzpah, which will most likely make your life a lot easier.
Along with standard browser debugging tools (Firebug or Chrome Inspector), I've found that's all I usually need to build clean, tested, mostly-bug-free JavaScript code.
I don't have cscript at hand, but I think you can try to attach VS to the process manually.
After you start up your js using cscript.exe //x myScript.js, click "Debug - Attach to Process", find your cscript.exe process and attach to it.
I forget if VS2005 has this function but VS2008 and VS2010 do.
It is the native debug action that VS takes to debug (attach to the running process). If this doesn't work, I don't think you can do this using Visual Studio.
Best Javascript Debugger is Rhino Debugger See http://www.mozilla.org/rhino/debugger.html .
it is open source and you can get the source code of the Debugger GUI.
you can customise it as you wish :-) .

Javascript Code Coverage tool for IE

I've got a rather hideous and large javascript file that I've inherited from a dev I loathe. There is a lot of dead code, and I find I've spent a lot of time refactoring functions that aren't even called.
Ideally, I just want something that can tie into the js engine and keep track of when and how many times functions are called.
In FF, I can get a list of the functions by walking the window object, and dynamically wrap them all in a method that would log the call to them, and then call the function as normal.
Unfortunately, in IE, I can't use this as I can't seem to find a way to get a list of all the functions that have been loaded. And I can't run this app in FF, as it's horribly browser specific. At last count there were 138 lines containing "new ActiveXObject(...)"
Help, either with a tool that can do this, or at the very least, a way to get a list of the functions that IE7 has loaded from the user script.
Thanks
-c
Try JSCoverage.
JSCoverage is a tool that measures
code coverage for JavaScript programs.
JSCoverage works by instrumenting the
JavaScript code used in web pages.
Code coverage statistics are collected
while the instrumented JavaScript code
is executed in a web browser.
The instrumentation can be done on-the-fly if you set the JSCoverage Server to run as an HTTP proxy and configure your browser to go through it.
One way to use it is:
Launch JSCoverage Server in proxy mode:
jscoverage-server --proxy --verbose
Configure your browser to you use localhost:8080 as the HTTP proxy.
Add the following bookmarklet, making sure the relative path to jscoverage is correct:
javascript:void(window.open('jscoverage/jscoverage.html'))
Run your tests.
Run the bookmarklet. It will popup a new window that shows you the coverage results.
There is a Firebug extension for JS Code Coverage...
FirebugCodeCoverage 0.1 (https://addons.mozilla.org/en-US/firefox/addon/4837)
Unfortunately, its not currently updated for the latest version of FF.

Categories

Resources