How does one diagnose errors in a controller? - javascript

I'm trying to get up to speed with AngularJS, coming from a Java background, not Javascript. I'm used to stepping into a debugger with Eclipse, MSDEV, etc, but not so much used to Google Chrome's dev tools or WebStorm (which I intend to use). Occasionally, I've made a mistake that apparently is detected upon startup. I'm guessing it's logged someplace (I hope!), and then silently continues. Then when I go to the page that would use the controller, I get the
Argument 'MyController' is not a function, got undefined
error. Of course, the attached stack trace isn't very helpful. So the big question is: how do you step into this mess when it actually finds the problem inside the controller, not later when it actually tries to use the controller?
I could post today's issue, but I'd rather have the tools to diagnose this myself than just solve the problem for today.

Install angularJS batarang chrome extension.
Go through github repository of angularJS-batarang
This extension is nice and we can easily debug the angularJS applications
About your error : possible duplicate of AngularJS/Jade Error: Argument 'MyController' is not a function, got undefined (MEAN)

Related

Testing Angularjs locators

Kind of getting desperate here.
I have a legacy testsuite using AngularJS (5.4.1) driven by Node 8.12.0.
I want to debug some tests but it seems impossible.
Control flow is enabled in the tests, so I followed the docs on the protractor website. Sadly, it does not work.
browser.pause() just get skipped and using browser.debugger() is deprecated from Node 8.
I decided to disable the control flow but I ran into another problem.
We go to a login page before accessing the application, and the angular debugger does not like that. When accessing the non-angular page, the debugger just quits, stating that angular is not defined.
I then turned to Google to see if there are any Chrome extensions that enable me to use the dev tools to test the locators, but to no avail.
Would be great if I can get the debugger working.
Thanks in advance.
Regards
Here is a setup for IntelliJ
(working directory is example)

Why my angularJS errors are showing like this in the firefox console and firebug?

I'm working in an angularjs application but somehow this plugin 'smart-table' it's not being added to my app modules array but that's not the problem, I want to know why firefox and firebug show the error like this, and if there's a way to fix this
this is how firefox and firebug show the error in the console. I tried using only the firefox console without a firebug but it's the same they both show the error the same way
why it appears all those percentage symbols and big letter cases 'F'?
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=SistemaActividades&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dsmart-table%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.8%252F%2524injector%252Fnomod%253Fp0%253Dsmart-table%250AG%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A24%253A186%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A23%253A251%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A23%253A494%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A38%253A117%250An%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A37%253A488%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A38%253A134%250An%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A7%253A331%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A37%253A488%250Aeb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A41%253A249%250Ayc%252Fc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A19%253A463%250Ayc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A294%253A192%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A175%253A62%250AIf%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A35%253A365%250AHf%252Fd%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.4.8%252Fangular.min.js%253A35%253A314%250A%0AG%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2F
This error is thrown by angular when it cant find the module that you are trying to pass, it is actually a link to angular docs that describe the error.
Try to check if the js of smart table is loaded before you pass to your app
load angular.js, than smarttable.js
then use it
angular.module('myApp',['smart-table']
That error happens when you have a dependency that you that you have not included the proper files for. This can happen when using third-party modules that you find from repositories.
Often times the module that you use will have it's own dependencies with it's own required files as well. Just ensure that all your dependencies are fulfilled.

JavaScript Debugging tools

I'm working with a project that came from other developer. I have a problem when it comes to some pages with a plugin that uses js/jquery. The problem is that there is an error when I look to chrome dev tools.
ncaught TypeError: $(...).retina is not a function
I am sure that this problem arises because the script didn't continue until it loaded the JQuery function. My question is how can I figure out which script contains the error and where the stop is. There are so many script to check. Is there a easy way? A tools or what so ever.

Strange angular js error

I am facing a strange angular js error. I am building an angular app. I am not very much proficient in angular. However I have successfully created some complex app. Now I am having a error in the browser console.
I can't understand the error a bit. The error shows stackFrame.js. But in my project there is no such js and I have searched web about it and I could not find any thing and the error is very fragile also. Once the error appears all angular activities are not working any more.
I can only attach the screen shot and the 'question_set.js (line 249)' is my code and on that line I have used $scope.$apply().
One more thing I would like to say that I used jquery ajax instead of angular http service. Because In yii2 the angular http does not populate the post data properly. I only can provide the screen shot.
Thanks in advance. If anyone and kindly give any clue. Specially the angular masters.
The error "href is null" seems to be a bug in Firebug according to this SO-post: AngularJS doesn't show specific errors in the Firebug console anymore .
The error is hiding an actual error in your code, but you can't see it because of the bug in Firebug. Try the default developer tools in Firefox or try another browser to find out what your actual error is.

Problem running a jQuery application?

I'm developing a jQuery mobile application. The application is developed in JavaScript, jQuery, and HTML. When I debug the application in browser using Firebug (in Firefox) it's working fine, but it doesn't run normally? Is there a reason it's running in debug mode only?
Your question is worded somewhat confusingly so I'm not quite sure what you mean but I think you might be running into a problem with console.XXX() statements in your JS - on a browser that doesn't have console defined (like IE) or a Firefox installation that doesn't have Firebug, console will be undefined and your JavaScript code is likely to fail if you have forgotten to comment out your logging statements. You can verify if that is the problem by commenting out all calls to console (or by watching the console and looking for log output).
A long term solution might be to define the console object when your JavaScript initially loads if it finds that the console doesn't exist - this way, even if you forget to comment out calls to console and someone who doesn't have Firebug installed or is using a different browser tries to use your code, they won't run into this issue. Take a look at this blog post

Categories