PrerequirementsThere are several Integrated Development Environment (IDEs) available for different programming languages. 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.
Jetbrains Webstorm Gulp Install A Chrome
Alternatively go to chrome://extensions, scroll to JetBrains IDE Support and click Options there. After installing, you get a fancy new icon within Chrome.Right click it and click Options. Including: Live Edit enhancement, JS suffix template, Gulp integration.To start using WebStorm as your debugger, you need to install a Chrome extension called JetBrains IDE Support. Similarly.F11 Run Gulp/Grunt/npm tasks Debugging F8 / F7 Step over / step into F7 Smart step into F8 Step out F9 Run to cursor F8 Evaluate expression R Resume F8 Toggle breakpoint F8 View breakpoints Navigation B , Click Go to declaration O Go to class O Go to file O Go to symbol Go to next editor tab Go to previous editor tabAs early as six months ago, JetBrains released the development route of WebStorm.
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.
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.
If you use gulp-sourcemaps you can use the sourceRoot attribute to set the correct folder, like we did in BoardZ.This approach is not only working for Angular 2, but for other JavaScript applications, too. You can now add a breakpoint in your TypeScript files and start debugging! Cool, eh? -)In case your WebStorm/Chrome does not stop at your set breakpoint, your source root of your source maps points to the wrong folder.
0 kommentar(er)
