We will be using developers tools that come with modern browsers.
So, when the page is loaded, press F12 to display the developers tools panel.
We can see the error message there and by clicking it, we can get right to the line of code that causes the trouble. The error message in a popup says: 'ctrlprice is not defined'. Replacing ctrlprice with the correct ctrlPrice fixes the issue.
Let's take a look at another example where we are calculating the amount on the fly and are not getting the anticipated result. We are calculating the order total 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 the Sources tab in the developers tools panel, find our file (pageevents_Order.js), and click the line number we we want to set our breakpoint.
Once the breakpoint is inserted, place the cursor on the Quantity field and press 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.