What are steps on debugging angular directives?
I've directive in HTML and it's JS definition.
I can set breakpoint on directive definition, and script stops there on load, showing fact that directive was loaded.
I can enable logging by setting
app.config([ "$logProvider", function ($logProvider) {
$logProvider.debugEnabled(true);
});
Sometimes it shows useful error messages.
But all that is not enough, often directive is just not being processed at HTML at all, and no log messages appear.
How do one test that directive is actually loaded (for example, by chrome console)?
And where should one look to completly check directive processing pipeline for bugs?
You can try ng-inspector plugin for google chrome to debug.
Related
We are having an odd issue in our angular project. The project runs fine on my machine, but when it's run from the development server we get the following error:
Multiple directives [organizationConfiguration, organizationConfiguration] asking for new/isolated scope on: <organization-configuration ng-show="tab.id == 'organization'" organization="organization">
organizationConfiguration is an AngularJS component. The code that is causing the error is below:
<organization-configuration ng-show="tab.id == 'organization'"
organization="organization">
</organization-configuration>
I can't see anything wrong with the code and have no idea where the second scope is coming from. And like I said, the code runs fine on my local machine, but once Jenkins deploys it to the dev server it starts to break. We've been using Jenkins for years without issue so I doubt it's an issue with that.
Thanks
Did you miss to close the "organization-configuration" tag properly? I could see you give it as "/organization-configuration>" in the example.
I have this angular website which for some reason cannot be debugged when everything is concat together (not minified). Fo example, if I try to set a breakpoint, the breakpoint is placed somewhere else (at the bottom of an other file) :(
So, to overcome this I would like to set a breakpoint using the browser console (if possible of course).
In my current situation I need to set a breakpoint inside a service method. So I figured, I need the reference holding that service. But where does angular keep those. For example, I tried this
$> var myApp = angular.module('myApp');
$> debug(myApp.injector('someSevice').someMethod);
If this would work, I would expect the debugger to kick in when someMethod is called.
Here is an other failed attempt:
$> myApp.run((someService) => { debug(someService.someMethod)});
Any help on how to do this would be appreciated?
UPDATE: Find a way to access a service
$> angular.injector(['myApp']).get('someService').someMethod
However, in my case, this function is called initially only
If you're trying to debug a live production app, there might be a chance where the debug info is disabled for the website which is actually done to increase performance of the website. So use angular.reloadWithDebugInfo(); in console and then try to debug.
Why doesn't angularJS directly throw the specific error location(i.e., in which file there is an error or fault), rather than giving a link their website link which gives some generic explanation? It is making debugging a very difficult task!
Whenever there is an error, i can't debug the app easily because I have to go through the complete application and search every line, if it is valid line or not?
You can use console.log() in the module where you are debugging, might make it easier.
Because AngularJS is not being compiled so it can not know its exact location where actual error occurred.
For example Suppose you are defining a module Say 'XYZ' as follows
angular.module('XYZ', []);
Then you are using this as
var app = angular.module('XYZ');
But if you did mistake and do as follows
var app = angular.module('XYZ', []);
AngularJS will think you want to override your previous module. Then angular can not found dependency for the old component which were defined earlier on 'XYZ' module. So angular will tell those component are not defined.
One more point mostly those error happens on angular digest cycle which is not in our code.
Another Example
$scope.$watch('foo', function() {
$scope.foo = $scope.foo + 1;
});
The above code will be executed infinite time because foo is being watch if it is changed, and insde of watch it is again being changed.
But after 10 iteration angular will stop execution and show a link. Because angular does know it is a digest cycle repetition happening. But do not know which part of the code is responsible for that.
Note: Yes, I found angularJS debugging is really little hard, But If
we see the error carefully and try to find out what latest changes we
did last time, then we can found exact problem.
I'm experimenting with a simple Javascript debugger for a WebView. I'd like to debug/control/inspect how some Javascript code is being executed inside my WebView.
I haven't found any solution other than using the WebChromeClient to receive the console messages.
Since I have access to the Javascript code I can add instrumentation code: a console.log call before each line, with a special message (e.g. "debugging line 3") that tells which lines have been executed.
It's quite rudimentary so I wonder if there's any better solution. It would be great if I could use the debugger statement to really control execution flow.
This is what I have been doing if I want to console.log() anything directly on the mobile browser so that debugging can be done on the actual device and not in emulator or similar...
I made JS debugger plugin and here is what it have:
it creates an absolutely positioned HTML element that is placed on top of the content and is semi transparent.
I made the JS logic that actually simulates what console.log() does and print out all desired information in mentioned HTML element
once plugin was done I simply used MoibileDebugger.log('what ever'); instead of console.log('what ever');
My code is still not published publicly but will do that soon, so that anyone can benefit from using it...
In any case this plugin can be made very quickly by anyone who is good in JS.
AngularJS markup shows all the hidden error messages, images, data in the markup if JavaScript breaks somewhere.
I saw ng-cloak but it only works to keep markup hidden till angular loads up.
Is there a way to avoid the UI getting disrupted when JS breaks ?
Yes : don't let JavaScript throw an uncatched exception in a production environment. That the purpose of unit testing, and one of the (numerous) advantages of AngularJS.