![]() ![]() Process.on('unhandledRejection', err => = require('react-dev-utils/browsersHelper') ĬheckBrowsers(paths.appPath, isInteractive) terminate the Node.js process with a non-zero exit code. In the future, promise rejections that are not handled will Makes the script crash on unhandled rejections instead of silently Do this as the first thing so that any code reading it knows the right env. I know it's not much to go on but I am dead in the water. The only thing I did in the meantime was, I believe, kill an errant process on port 3002. It's frustrating, as it was working perfectly. (I tried it both with 'ensure breakpoints' not checked, as I had it originally, as well as checked - no difference)Īnd the actual script is at the end of this post (it is a long script which I didn't write and don't understand). I tried restarting WS, as well as creating a new debug config (see screenshot) I need to click the red square again to stop everything The weird thing is that when I click on the little red box to stop the process, then the little bug icon lights up with a green dot on the bottom (it's debugging) and a new tab opens up in the Chrome instance. Neither does it stop on breakpoints (see screenshot) All was going well and then - changing nothing - it stopped working.īy "stopped working" I mean that when I click on the little debug icon in the toolbar the app starts up and loads in the custom Chrome instance (I quit Chrome between debug sessions, as instructed), and the little 'stop' square lights up. It connects to a custom Chrome instance - custom, so that I can retain my particular Chrome setup (Redux Dev Tools, etc) in the instance opened by the debugger. This approach is not only working for Angular 2, but for other JavaScript applications, too.I have WebStorm set up to debug a React app using a Javascript Debug configuration. If you use gulp-sourcemaps you can use the sourceRoot attribute to set the correct folder, like we did in BoardZ. In case your WebStorm/Chrome does not stop at your set breakpoint, your source root of your source maps points to the wrong folder. You can now add a breakpoint in your TypeScript files and start debugging! Cool, eh? -) If everything works, Chrome shows a little note at the top of the page, that JetBrains IDE Support is debugging this browser. You need to go to the extension and change the port to whatever WebStorm wants. WebStorm will tell you which port it uses for the connection to the extension. If WebStorm complains that it cannot find a running JetBrains IDE Support then the port it tries to reach is wrong. WebStorm will now attach itself to the installed Chrome extension (or opens a browser at first, if it is not open yet). If done, click on that little Bug icon in WebStorm (and be sure, that the correct configuration is selected). ![]() For BoardZ that's a simple npm run watch. Start all the scripts you need to run your web application. There should now be an entry pointing to your project. If everything is running smoothly, as it should, WebStorm automatically populates the list of Remote URLs of local files. Per default, BoardZ! is hosted on so I put into the URL field. In URL you put in the URL where you web application is hosted. A new dialog will open, where you click on the little plus icon at the top left and select JavaScript Debug.Īt next you need to set some settings on the newly opened right side. Within WebStorm, go to Run -> Edit configurations. So if the build process of your web app does not create source maps yet, you need to do this first.įor this demo I'm using the BoardZ! Cross Platform Sample Application which fortunately already creates source maps. Since we want to debug Angular 2, which uses TypeScript, we need to create source maps, too. Now switch to your beloved WebStorm and open the project you want to debug. Especially the port should be noted (which defaults to 63342).Ī left click on the fancy JetBrains icon will switch to your IDE, if it is open. A new page will open, showing you Host and Port. Alternatively go to chrome://extensions, scroll to JetBrains IDE Support and click Options there. After installing, you get a fancy new icon within Chrome. To start using WebStorm as your debugger, you need to install a Chrome extension called JetBrains IDE Support. I've got a "debug stack" in my head which is visually presented by all open files in WebStorm making it much more easy to jump around in the source code. Most of the time, all necessary files are already open in my IDE, since I'm currently working on them. But sometimes there are cases, where I want to use WebStorm for debugging. ![]() When it comes to debugging, I spin up my Chrome Developer Tools and debug along. Most of the time I have a fullscreen WebStorm on my primary and Chrome on my secondary screen. WebStorm is my favorite choice when it comes to develop web applications especially with Angular 2. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |