For this purpose we will be using developers tools that come with Chrome browser.
Since this is not a syntax error the Syntax Check won't pick up on it but browser will.
This will organize the code in the way that is much easier to follow.
So, when the page is loaded we click F12 to display developers tools panel.
We can see our error message there and by clicking error message we can get right to the line of code that causes the trouble.
Error message in popup says: 'ctrlprice is not defined'. Replacing ctrlprice with correct ctrlPrice fixes the issue.
Let's take a look at another example where we are calculating amount on the fly and are not getting the anticipated result.
We are calculating the order by multiplying the number of units in the order by the price of the unit and adding a tax to the equation.
And here is the result it produces:
So, in the order where we have 3 units at $120 each with 10% sales tax our total should be $396 dollars. However, the total we are getting is $12960.
To add a breakpoint we need to proceed to Scripts tab in Developers tools, find our file (pageevents_Order.js) and click the line number we we want to set our breakpoint.
Once breakpoint is inserted put cursor to Quantity field and hit any arrow key on the keyboard.
Program execution stops and we can see what's going on. We can use F10 key to move to the next line of code (Step over).
Now lets add a few watch expressions on the right side.
We can see that total and tax are calculated properly however we multiplying them instead of adding up which causes the error.
A simple correction in the equation logic solves the issue.
Real life examples are more complicated though basic troubleshooting techniques are the same.
You can also watch a video version of this tutorial.