![]() ![]() 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. |