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).
Related
Right bow, after changing JS files, i must run the command ./bin/build-administration.sh administration:dev to update js file on browser.
I am looking for a mode, where JS files will update directly after I reload the browser and don't need to run the command.
If you're using the Development template you can use ./psh.phar administration:watch to start the administration watch mode with hot-reloading. So your browser will automatically refresh the site after you made some changes to your administration files.
You can also get a full list of commands with./psh.phar.
If you're using the production template - which i don't recommend for local plugin development - you can use bin/watch-administration.sh. Those commmands are described within the README of the production template repository.
Only after you finished all your work, you have to build the files for the production environment.
Take a look at this article to learn the difference between the production and development template: https://www.p16r.nl/2020-08-28-shopware-6-development-versus-production-template/
Once a node.js program has run to completion in the context of an --inspect session (i.e. via the Chrome dev tools debugger) is it possible to re-start it without having to re-issue the --inspect command from the command-line?
The issue with re-issuing an --inspect command is that it generates a different chrome url every time and one has to then copy-paste this into Chrome each time. Ideally I want to be able to push F5 to re-start the chrome debug session.
So two issues:
I cannot restart the debug session without killing the current (i.e. no way to just refresh).
I have to copy paste the url into chrome each time I start a new session. (not as bad as issue 1.)
Here's a couple of options for you, though neither will provide you with a simple F5 refresh, both are significantly better than copy/pasting the new URL generated by the --inspect flag.
The most optimal solution is installing this extension for Chrome or Opera: https://chrome.google.com/webstore/detail/nim-node-inspector-manage/gnhhdgbaldcilmgcpfddgdbkhjohddkj
This will manage the node inspector for you. Just click the resulting toolbar icon and select "Auto" from the toggle switch. Your browser will then open the Chrome DevTools in inspection mode whenever your node server generates an inspection URL.
If you want to go the low-tech (and more manual) route, or don't want to install a Chrome extension, just open your Chrome to "chrome://inspect", wait a moment, and you'll get a list under Remote Target that will include your Node server. Just click the "inspect" link there, and the DevTools will open with the current URL. The downside of this method is you'll need to reclick that "inspect" link every time your server restarts. It avoids copy/pasting URLs, but still involves manual labor.
It's also significant to note that if you simply update the url of your inspector with the new ID, it will also work.
When you restart node, you'll get something like this:
Debugger listening on ws://127.0.0.1:9222/72c791b7-178f-47e8-93b1-d1be4d5ffe1e
The bit after the port/ is what you want. Replace that code in your inspector's url and it will connect to the latest session.
I created a VS Cordova project, and need to download some data from a web service, but Ripple runs inside Chrome, and Chrome considers that request "cross-domain" and blocks it. Setting ripple proxy option to disabled/local/remote has no effect. I can start another instance of Chrome with --web-security-disabled command line option, point it to the same URL http://localhost:4409/... and application works fine in that second Chrome. Now all I need is to find a way to pass --web-security-disabled to Chrome when I start it by pressing F5 in Visual Studio. It's probably somewhere in some config file, just need to find it ...
It is difficult to know without looking at the exact code, but it is likely that one of a few of things is happening:
Your code is bypassing the CORS proxy in Ripple
Proxying through Ripple is resulting in the web server denying the request.
You have the Ripple extension installed in Chrome. In effect you can end up with two Ripples running which can cause a number of unexpected behaviors.
To know which is happening, be sure the CORS proxy is set to "local" and check the network tab. An XHR call to www.bing.com would look something like this:
http://localhost:4400/ripple/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//www.bing.com
Try just doing this from your index.html page and see if it succesfully goes through the proxy.
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://www.bing.com", true);
xmlhttp.send();
If you need to further debug or you want to use Ripple outside of Visual Studio, you can actually install the Ripple npm package and use it outside of Visual Studio. Build for Android in the debug config, then go to the bld/Debug folder and execute the following from the command prompt:
npm install -g ripple-emulator
ripple emulate android --port 12345
A browser Window will appear. Paste that into Chrome if its not your default and retry. You can then see what is going through the proxy in the command prompt.
You can also use this same method to debug your app using the Chrome Dev Tools with --web-security-disabled.
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!
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].