Debug a Canvas page (Controllers and Debugger)

Each browser has each of its own debugging tools to help you troubleshoot your web application. And each tool gives you different views and helpful information about your HTML page. 
On this article, we will be using Chrome as the browser and how we can debug by enabling breakpoints.

To debug a web page, there are 2 steps that you will need to do beforehand. First you need to mark a stop in your code where you want the browser to stop when its refreshing the page. Then, once the browser stopped, you can start debugging by going through your code step by step.

Note that the Developer Console (press F12) must be open before proceeding. Here are the two common ways that you can do to enter debugging mode:

var i = 0;// other logics here...debugger; // pause here

Adding this line of code into your JavaScript will tell Chrome to halt execution up to this point. 

A second way is: on the Sources tab, navigate to the JS file that you wanted to debug. The contents of this file will be shown on the right which should also show the line numbers for each code. Clicking on the line number for which you want to halt execution will enable/disable breakpoint.

Now that you have setup your debug points, it is time to start examining!
Let us say, we have a page debug.html, with the following SUBNM where we would like to do something when the value of the SUBNM changes (tm1-change=”page.onSubNmChange(page.year)”):

<tm1-ui-subnm         tm1-instance="dev"         tm1-dimension="Year"         ng-model="page.year"         tm1-change="page.onSubNmChange(page.year)"></tm1-ui-subnm>

and a controller debug.js with the following code:

$scope.page = {};    $scope.page.onSubNmChange = function(data){  debugger;    for(var i = 1; i < 10; i++){    console.debug('i: %o', i);    }    console.debug('onSubNmChange %o', data);};

As you can see, there is a line of code containing ‘debugger;‘. Once you reload the page, your console should look like this:

Notice the debugger was highlighted in blue. We are now in debug mode!

On debug mode, there a few more buttons now available that can help you. Hovering the mouse pointer over them will give you the keyboard shortcuts to trigger them.

For simplicity purposes, we will just focus on two functions: F8 and F10. You will see these on the main browser screen too.

Pressing F8 means it will continue on until the next breakpoint or debugger; line. Whereas pressing F10 means, “execute this line of code, and go to the next”.  Since we are in debug mode already, do explore the Sources tab and hover over some variables. Think of this as a way of examining processed variables at certain point of execution! And this is how it can look like as you hover (I hovered over the variable i, to see what is the current value):

Pressing F10 and examining the variables along the way will give you an idea on what and how it is currently working. This should also help you trace through your various functions, especially if you are calling a function within a function!