I am running Application.java from within IntelliJ and Grunt Serve from the Command Window. Thus, I can debug Java code and Live Reload changes to Html. But I cannot set breakpoints or trace Javascript files.
I know I could debug in Chrome, but I rather debug in IntelliJ if at all possible.
I would appreciate any suggestions.
Thanks
You should be able to do this with the NodeJS plugin for IntelliJ. I have it installed on my machine and I'm able to right-click on my project's Gruntfile.js and select Run or Debug.
Related
Is it possible to debug a Spring application running on jetty and the front-end angular part at the same time in IntelliJ Idea?
The breakpoints in the backend work great, but the front-end ones are ignored.
Yes, it's posible.
You need to install this Chrome Extension:
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
To debug the angular project, you create a new debug configuration:
In IntelliJ Idea go to Run -> Edit configurations.
Click the + button (Add New Configuration) and select the JavaScript Debug.
Change the URL with your application local development url, usually http://localhost:4200/
Save the configuration, execute ng serve and run the configuration in debug mode.
You get the breakpoints working in server and client!!!
It can be done in this way with IntelliJ Idea:
For backend (pretty obvious)
Create a Maven run profile and pass in these arguments: jetty:run.
Then debug this run configuration. This will enable you to 'listen' to the backend of your application.
For frontend:
Create a JavaScript Debug run profile and set it up as follows:
URL: http://localhost:9070/ (this is where my jetty server and my application was running).
Then you have to set the REMOTE URL of the directory where you AngularJS app is (in my case it was /app) to: http://localhost:9070/
And all that's left is to run as debug this configuration and that will make debugging the front end possible also.
I inherited an AngularJs application that was built using WebStorm, NodeJs, Npm, Grunt etc.
The app is set up in such a way, that I have to run grunt serve to initialize a local server that hits the API and return data. If I simply run it as Localhost (through either WebStorm or VS), it does not pass validation to return my data through the API.
My question is; Is it possible to link grunt serve to IE in Visual Studio, in the same way you would run an application in Debugging (F5) mode?
I enjoy using Visual Studio, and like debugging and stepping through my code with IE, as this allows me to set breakpoints in my JavaScript and C#.
I would suggest that Grunt Launcher will help you:
https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff
Although I did not manage to link "grunt serve" to IE in Visual Studio, I was able to debug using IE, by running my project in Debug mode (F5).
I simply copied the path with token created when running "grunt serve", and used this as my path in Local Host when debugging in Visual Studio. This way it connects to the API, and is validated.
I'm building an AngularJs web application in WebStorm. I use browserify as a bundling package, and gulp as a task runner.
I tried setting breakpoint on the individual Javascript file in Webstorm and run Debug. But, I'm not unable to hit the breakpoint.
Also, I tried debug a angularjs application without browserify and gulp. I was able to debug in Webstorm.
Is it possible to run debug in a bundled javascript file? How would we make that work?
If not, what could be the reasons?
Found a solution to this problem. We will need to upgrade to Webstorm 10. Webstorm 9 doesn't support source map in debugging mode.
I am trying to debug an Angular application using IntelliJ Webstorm (10.0.1). I created an application with Yeoman (1.4.6) using the command yo angular. I then opened the directory as a project in Webstorm. (This is the same configuration as described in "Grunt Server and WebStorm javascript debugging (and SpyJS) not working".) I can run the application using grunt serve both from the command line and from within Webstorm. I now want to set breakpoints and step through the Javascript in Webstorm.
I followed the instructions in How to debug AngularJS with Intellij, but debugging still does not work. Specifically, I start the app with grunt serve and then try to connect with my debug configuration, but the debugger never connects. The Debugger window in Webstorm reads "Waiting for connection from JetBrains IDE Support Extension for Chrome (IDE port 63342)."
I am on OS X (10.10.2). My default browser is Chrome (41.0.2272.118). The JetBrains IDE Support extension (2.0.7) is installed and enabled in the browser. It is using the default port 63342.
My Angular application is running in the default location http://localhost:9000.
In the debug configuration, my "URL" is http://localhost:9000/ and I map the index.html in my project to the "Remote URL" http://localhost:9000/index.html.
I am asking this separately from the other Webstorm debugging questions on StackOverflow because those do not mention the "Waiting for connection" message and their solutions are to follow the instructions that I started from.
Any ideas on what I'm doing wrong?
I have a basic Angular app installed using a Yeoman fullstack installer, and I can see the basic pages running on http://localhost:9000 when I run 'grunt serve'.
I also have a Vagrant installation running using the ubuntu/trusty64 box. I was originally seeing a 404 when trying to view http://127.0.0.1:4567/, but following some instructions I found online, I edited the file in 'vagrant ssh' at /etc/apache2/sites-enabled/000-default.conf by removing the html part of the path in that file. After doing 'vagrant reload' I now see the list of files in my project dir when I go to that URL.
How do I go about viewing my angular app like it is at localhost:9000? If I get this working will this mean that if I share via Vagrant, they'll see the angular app running as it should? Do I still need to be running grunt serve in combination with Vagrant?
I'm pretty new to all this setup, so I'm just following the instructions at https://github.com/DaftMonk/generator-angular-fullstack & https://docs.vagrantup.com/v2/getting-started/index.html
I'm not great with Linux/cmd line stuff as yet, hence my problems... :)
Thanks!
I started writing instructions for you on how to get it done. But then realised that you are not very comfortable with linux commands. I have created a angular-seed project that uses vagrant, angular and requirejs. Its easy to set up and I have written instructions on how to do that in my github page.
Just clone it, follow the instruction and you will have a working seed project in no time. Some of the features of the seed are:
Uses vagrant and puppet to provision the vm. All required dependencies are automatically installed.
Grunt tasks for:
autoloading bower dependencies
compile sass or scss
livereload
server for access of site locally
If you have any difficulties or questions, feel free to contact me.