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. I received feedback from a Ionic 2 user experiencing issues with the debug configuration in P圜harm and WebStorm (2016.2).WebStorm is my favorite choice when it comes to develop web applications especially with Angular 2. Note to especially to WebStorm and P圜harm: If IntellJ/Webstorm recognizes the breakpoints and is able map it to a file the breakpoint changes its look and shows a checkmark on the red dot. make sure to have the path to URL mapping correctly in the debug config.This should trigger an alert in your browser window. To do so go to the debug tab and type “alert(1) ”. Make sure that the connection between IDE debugger and browser is ok.Make sure to have the browser extension installed: You are ready to run Ionic 2 from IntelliJ/Webstorm/… and to enable debugging. Your IDE needs this setting to understand how the generated sources and the originally sources are connected. ![]() Then add the folder mapping of the Remote URL localhost:8100 to the folder containing your ionic project ( where your package.json is ). Name the newly created debugger and choose URL and browser – for me chrome and localhost:8100. In order to add the TypeScript debugging click the green plus again and select “JavaScript Debugging”: We can run Ionic 2 serve now via our IDE. Now set name and command and platform as seen in the screenshot: Later you can add run Android, Windows Phone and iOS by yourself. Scroll down and select “PhoneGap/Cordova”.įor now we only want to add the ionic serve task to the run method. Next step is to enable Run Cordova, go to Run -> Edit Configuration and use the green plus icon on the top right corner of the window to add a new configuration. ![]() To do so go to Settings -> Plugins -> Install JetBrains plugin and search for “cordova”. Above all make sure to have the “Phonegap/Cordova” Plugin installed when you want to start Ionic from Run. ![]() Setting up Ionic 2 debugging is pretty easy.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |