I love the AngularJS integration with WebStorm. It makes development of angular apps even quicker and snappier than ever. However, I'm struggling to get Chrome debugging to work. Does anyone know if this is supported through the AngularJS plugin?
I've setup the javascript debugger, and I get the Chrome extension to connect to WebStorm. I then navigate to my app's main page (the login page) and any breakpoints on that page work great. But then as soon as I change to any other route in the app, the breakpoints and variable inspection just stop working.
I imagine that's because WebStorm doesn't know which javascript file (or angular module) is being executed after the route changes. Does anyone know if there is a way to configure this to make it work? It would be really great to be able to inspect/debug my $scope variables, bindings, services/directives, etc.
Thanks in advance for any help.
PS. I'm currently using the WebStorm 8 EAP, but I also have WebStorm 7 available.
UPDATE: After some more googling, I found that you have to setup the Run/Debug Configurations within WebStorm. My problem was that I had the wrong Remote URL for my project's root folder. After changing that configuration, it works great :)
Related
When I run ng serve or ionic serve for my ionic and angular projects, the live-reloading feature works for a while. However, after an hour or so it stops working. I can tell because I run into an error, make a change to the code, and notice that it is the same. Then I look into the source files of the project via inspect element to see my changes have not been made. So, I restart my angular or ionic project. Usually, that fixes things. However, this is quite an annoying problem. I have experienced it twice today, once on an ionic project and once on an angular project. Is anyone else having this experience or knows how to fix it? It has been going on for a few weeks now at least for me.
My thoughts are that a problem is in the routing differences between these two.
The application works when I serve it on localhost:3000 and the whole front-end is presented, but when I build the application using mvn package and upload the .war file to the Liferay Portal, I am presented with only the navigation bar.
Also when I press on any element in the navbar, nothing happens. Neither in the console, network or on the URL. If someone has any clues it would mean a lot to me.
Thank you.
This question needs some clarification about the source code and what did you use
But maybe you are using the BrowseRouter rather than HashRouter
Having an AngularJS app of basic structure - components, providers, services.. many separated .js files.. I use a grunt taks to compile them into single .js file eg: application.js?v${build}
To save time, I use IDEA plugin "Live Edit", it reflects all changes in .html real-time to browser.
All connected by JavaScript Debug config via "JetBrains IDE Support" plugin with Chromium web browser. All those work fine.
Now the problem: I cannot live reload changes in angular/JS. After every change I have to manually run grunt task to compile angular to single js and hit F5 in browser. (I know it is not a big deal, but image doing that 1000 in a day :) Any help appreciated!
PS: I can debug the JS, debugger stop correctly on breakpoints set in IDEA IDE.
How about grunt plugins for watching changes and using browser sync for reload? There are also other approaches like using yeoman for creating structures and serving them with grunt automatically.
I have a new project with the following components in use:
Node.js (v0.10.37)
Express micro framework
Jade templating engine
Angular.js (latest)
Material design library (material.angularjs.org)
Jquery
I have an issue when I do browser reload (hitting the browser refresh button). I am not using any of the Angular.js routing capabilities. I am using the Express router and I have a route for every page.
When I try to refresh, a page build with this components, sometimes (1 of 20 reloads) the AngularJS just doesn't run without any console errors.
The issue is more common when I navigate between routes like:
I am on localhost:3000/index and I go in localhost:3000/about
In this case is more likely to occur this issue.
EDIT: I am not using any of the AngularJS routing capabilities.
EDIT: I also tested the DOMContentLoaded wrapping solution.
EDIT: I attached a plunker but the issue doesn't reproduce. I think it has something to do with the server too. The plunker is really close to reality.
ng-app="StarterApp"
See the plunker :)
EDIT: http://plnkr.co/edit/Vi1AQxNxJTDBf4B1ZEhr?p=preview
EDIT: If you encount the error on plunker please tell me.
EDIT: I also tried to activate: $locationProvider.html5Mode(true);
EDIT: I also found that this occurs when the server and computer (running on localhost) is really stressed. (82% RAM - 1 CPU core at 99%)
I also tracked the requests and I found that the files are loaded correctly on main requests but the requests done in Angular (Ajax requests) doesn't fire.
I also installed some Chrome AngularJS debugging plugin and it doesn't run either when this occurs.
This happens on all my pages sometimes, so I don't think that some code will be useful.
To fix this I reload again and sometimes I reload 2 times to fire up the Angular.JS.
This are the following cases:
When it is working
The interface
The console
When it is not working
The interface
The console
It really annoys me. I will continue investigating this issue but I will really appreciate any help.
Evrika!
I found the problem. Thank you all for support.
It was a problem about angular.js debugging chrome/firefox extensions.
The Ng-Inspector loads on every load a script ng-inspector.js and in this script it is a controller that deals with $state service and declare how to load the user modules in order to push debugging data into the plugin.
Somehow this loading configuration messes with my loading configuration.
The code was well-written but I didn't thought about this.
So if you encount this problem make sure that your debugging plugins (ng-inspector and angular batarang) don't interact with your business logic inside your project.
I made some stress testing to make sure that this issue doesn't occur anymore.
Server load
Now everythink is ok.
I have a project that just happens to be MVC and in Visual Studio 2010. (I don't know if that has anything to do with it, but I'm just trying to be specific in the problem) The issue is that when I build it it is auto minimizing the javascript and as such makes it really hard to debug.
I have looked at the build events and there are none.
I have looked for any vs extensions that could do this and I don't see any out of the ordinary.
I have edited the project file just to make sure nothing was hidden in it.
Does anyone have any ideas as to why this behavior could be happening?
Does your site master just reference a minified js file instead of your development version of the js file?
Thanks to all for trying to help. I found it though. Our company has created an HttpHandler that was configured in the web.config that causes this functionality. I thought I had looked everywhere, but missed this as I was going through it.