How do you set up Webstorm 6.0 to breakpoint debug a nodejs application? - node.js

I have not found a good simple tutorial for this. I just want the app to freeze at the breakpoints so I can explore the contents of the various variables, particularly their json content.
This is a garbage documentation:
http://www.jetbrains.com/webstorm/webhelp/running-and-debugging-node-js.html#d40161e701
I can't even set up breakpoints. Is it so simple to do this in Eclipse...
UPDATE
Using Webstorm 7.0's early access build, the debugger works flawlessly. I just made a new project, added a breakpoint and used Debug. Stopped at that breakpoint with no problems whatsoever, so apparently Webstorm 6.0's debugger sucks :D
You can get it here: http://confluence.jetbrains.com/display/WI/WebStorm+7+EAP Beware, it expires on 8 August.

I use webstorm and it's great. Having looked at that documentation, I agree. If you're just starting out, you don't need all the remote and attach to existing processes options.
The easiest option would be to rightclick on your main js file and choose debug. Setting breakpoints is the same as in most editors these days, just click left of the line.
If you don't get the debug option when you right click then you need to make a run/debug configuration which sounds worse than it is.
Select "Run" -> "Edit configurations".
Click the plus sign.
Choose "Node.js"
Click on the browse ... button on the Path to Node App js file and choose the file you want to debug
Click Ok.
Click on the bug!

Related

Is it possible to run React.js debugger in editor than in web browser

I want to debug my React.js project by adding breakpoints in WebStorm rather than in my web browser.
Is it possible? If yes, how?
Run npm start to get the app running in the development mode.
You can do this either in the terminal or by double-clicking the task in the npm tool window in WebStorm.
Wait till the app is compiled and the Webpack dev server is ready. Open http://localhost:3000/ to view it in the browser.
Create a new JavaScript debug configuration in WebStorm (menu Run – Edit configurations… – Add – JavaScript Debug). Paste http://localhost:3000/ into the URL field.
In WebStorm 2017.1+
No additional configuration is needed: go to step 5!
In WebStorm 2016 (.1, .2 and .3)
Configure the mapping between the files in the file system and the paths specified in the source maps on the dev server. This is required to help WebStorm correctly resolve the source maps.
The mapping should be between the src folder and webpack:///src
If you’re wondering how we got this mapping, check http://localhost:3000/static/js/bundle.js.map file. This is a source map file for the bundle that contains the compiled application source code. Search for index.js, the main app’s file; its path is webpack:///src/index.js
Save the configuration, place breakpoints in your code and start a new debug session by clicking the Debug button next to the list of configurations on the top right corner of the IDE.
Once a breakpoint is hit, go to the debugger tool window in the IDE. You can explore the call stack and variables, step through the code, set watcher, evaluate variables and other things you normally do when debugging.
This app is using Webpack Hot Module Replacement by default and that means that when the dev server is running, the app will automatically reload if you change any of the source files and hit Save. And that works also together with the WebStorm debugger!
Please take note of these known limitations:
The breakpoints put in the code executed on page load might not be hit when you open an app under debug session for the first time. The reason is that the IDE needs to get the source maps from the browsers to be able to stop on a breakpoint you’ve placed in an original source, and that only happens after the page has been fully loaded at least once. As a workaround, reload the page in the browser.
Webpack in Create React App generates source maps of the type cheap-module-source-map. This kind of source maps do not guarantee the most precise debugging experience. We recommend using devtool: 'source-map' To make changes to the app’s Webpack configuration, ‘eject’ the app (refer to the Create React App manual to learn more).

How could breakpoints cannot be bound in VSCode using debugger for chrome?

I have a nodejs project and I want to debug it using chrome debugger plugin in vscode. even though I tried many times after searched and learned from the Internet, I still failed.
below is my config file:
and this is the project structure :
the result is:
and the output of .scripts likes this :
how can I modify my config to debug normally? thanks in advance.
moreover, if I set breakpoints in chrome's devTools and matched (of course chrome cannot miss its breakpoints), vscode stops code execution, too. at present, I can execute step by step (including F10, F11, etc) using vscode's button.

Remote Debugging Azure Worker Role

There are a million links like this one http://blogs.msdn.com/b/cie/archive/2014/01/24/windows-azure-remote-debugging.aspx, which more or less would seem to take care of the remote debugging setup. I have done this many times in VS 2013 Update 2, deployed, then attached to debugger and it simply does not work. Well, the debugger seems to attach, but I continually get the message when I hover over a break point informing me that 'The breakpoint will currently not be hit. No symbols have been loaded for this document' A while back I recall seeing a channel 9 presentation and they seemed to configre the symbol store. I tried configuring this and it still gives me the same message when hovering over the breakpoint.
VS 2013 Update 2 Remote Debugging - I can only get it to work with a 'Debug' build. I have set the Debugging Option "Enable Just My Code" and loaded all symbols -- this seems to work fine. I can now set breakpoints and do not receive the message you (and I) noted earlier.
This is probably not the ideal situation as it would be nice to be able to attach the debugger to a production release but it seems to be a semi-reasonable workaround for now.
EDIT:
Important points:
You must enable Remote Debugging in the Azure Portal for your Cloud Service or Web Site -- Configure Tab (it only remains enabled for 48 Hours)
The debug attribute of the compilation element in your Web.config file must be set to "true". This means, you either have to do a 'Debug' build or manually edit the Web.config file. Here is a link to official Microsoft documentation with a full explanation and a great example of how to do that without redeploying your application:
http://azure.microsoft.com/en-us/documentation/articles/web-sites-dotnet-troubleshoot-visual-studio/#remotedebug
If you still have problems you may have to disable the Debugging Option Enable Just My Code in Visual Studio
I had the same problem - also with VS 2013 Update 2.
The crucial bit I missed was selecting the w3wp.exe process in the pop-up that shows the running processes before hitting the Attach button.

Debugging Node.js with Eclipse

I am trying to debug Node.js (v0.6.1) with Google's Eclipse debugger plugin for V8. I'm using Eclipse v4.1.0 on Windows7. I followed the Using Eclipse as Node Applications Debugger, but whenever I try to attach to a running Node.js (port 5858) process, I get a pop-up error message saying:
An internal error occurred during: "Debug session initialization: Node-5858".
Exception occured in callback
Any suggestions ?
I have been looking into a problem similar to this, this is what I have found
The instructions for setting it up, might just be worth re-reading these to make sure everything is as it should be:
https://github.com/joyent/node/wiki/Using-Eclipse-as-Node-Applications-Debugger
Do note that when looking around at a similar problem i located this help ticket on google code, it relates to a number of users who are having problems with Node.js on windows:
http://code.google.com/p/chromedevtools/issues/detail?id=53
It might be worth just downloading the newest version of Node.js as I believe this now has the fix in place, else download the fix file then mention within the ticket.
You can try to test for Nodeclipse version 0.2.0 beta.
http://www.tomotaro1065.com/nodeclipse/
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.
Just try this :
After creating the project, go to the cmd and provide the filepath of the file which you want to debug.
Now run the command node --debug-brk demo_node.js
(where demo_node.js is filename)
Now come to eclipse side, open the same file and set the break points.
Right click on the source file and select [Debug As]-[Node Application].

how to remove unwanted help menu in Eclipse RCP?

Hi StackOverflow team !
I've created an Eclipse RCP desktop application which has an extra menu called 'Help' in the menubar. I didn't create it from any of usual ways like adding actionSets extention, or creating and registering the actions from ActionBarAdvisor.java of the project. I don't need it anymore. Please, suggest me how can i remove it from my Menubar ?
It's sounds like the help UI plug-ins are being included within your run configuration
Couple of things to check...
-- Have a look at your application's .product file, and see which plug-ins are defined, and see if the org.eclipse.help.ui plug-in is defined (org.eclipse.help is probably defined since org.eclipse.ui.workbench requires it, but this won't cause the menu to appear)
-- If you are running within Eclipse, open Run --> Run Configurations, select the Eclipse application you are running and check the plug-ins tab. If it is launching with 'all workspace and enabled target plug-ins' then this will be picking up the help UI plug-ins too. Even if it's not set to this option, check the plug-ins ticked to see if the org.eclipse.help.ui is defined.
This configuration should only use the plug-ins required for your application. If it was created by using the 'Launch an Eclipse Application' option from within the .product file, the configuration created should match the plug-ins defined in that.
It's also worth making sure that no other plug-ins use org.eclipse.help.ui - this can be easily seen by removing it, and then pressing the 'Validate Plug-ins' button within the run configuration dialog, it will show you if anything has been broken after removing it

Resources