Wednesday, April 22, 2015

Chrome Debugger, setting breakpoints in angularjs


So, If you are like me and you live with the debugger, even in JQuery, Amglar is going to throw you for aloop... because chrome's debuggers breakpoints dont' work..

And you you get the BAtarang tool for "debugging" angular... it's aparent pretty quickly, that i'ts not debugging in a debugger, but something else entlirely...

I'ts like going back to the 1990s when Programemrs would decalre pridefuly "only bad programemrs need to use a debugger"

Fortunately there is a way to get a break point.. stepping through code is harder but if you drop the keyword 'debugger;' into you code, it will force a break point when that anglyuar function is called.

 $scope.SaveScript = function () {
        debugger;// it will break here
        if (($scope.selectedLanguage == -1) || ($scope.selectedCallscript == -1)) {
            return;
        } else {
            var ckData = CKEDITOR.instances.CkEditorId.getData();
            var dataToSend = TestService1.BuildSaveScriptCV(ckData, $scope.selectedLanguage, $scope.selectedCallscript, "test tile");
            var linkUrl = 'http://localhost/Scout3G/Maintenance/SaveScript';
            //var linkUrl = '@Url.Action("SaveScript","Maintenance")';
            TestService1.JcdcAjaxDoPostRetrieveJson1(linkUrl, $scope.DisplaySavedScript, dataToSend);
        }
    };

it's not beautiful, but at least you can tell if a function is gettign called without resoritng to cave man debugging with Alerts.

useful links in debuging angluarjs
http://24days.in/umbraco/2014/debugging-angularjs/
http://ng-inspector.org/
http://stackoverflow.com/questions/18782069/how-to-debug-angular-javascript-code
https://chrome.google.com/webstore/detail/angularjs-batarang-stable/niopocochgahfkiccpjmmpchncjoapek?hl=en-US
http://odetocode.com/blogs/scott/archive/2014/07/29/debugging-angularjs-in-the-console.aspx

No comments:

Post a Comment