Drag it in. There we go. Here are our two inputs – our numerator with 84 and our
denominator with 2. Here is “And the answer is” – that’s where the answer is going to go and here’s the button. So when I click we get the answer which is 42.
Now if you put a zero in here and click the button, of course you’re going to get infinity which is a bad thing, which indicates there’s perhaps a bug in code here.
So, let’s right-click. Let’s go inspect element.
Over here on the left, you can see that one of the line numbers is highlighted for us by default and that indicates there is that breakpoint. I’m sure you’re all familiar with breakpoints. You just single-click on the line number and you can set multiple breakpoints if you like, but we’ll just keep it here as 1.
Over here on the right – at the top here are the usual suspects for a debugger. It’s a little sign here that says that you can jump through to the end of you script. You can single step, you could step into a function, you can step out of a function. We don’t need to really talk about those things. You’re all familiar with the concepts. We just want to show you where they are, where you can find them.
Let’s click on the button here and see what happens. Here we go. Our live area at the top is greyed out and our code here now has stopped at our first breakpoint. And if we hover over the numerator you can see that it is undefined.
I’ve got a little example here so we can see it in action. A very simple theme – I could build a function called dividemembers. It just takes a numerator and a denominator, that’s the division, and pops the result into a variable called vResult and then displays that on the page.
And then we got two inputs, one for numerator and one for denominator. Here I actually put the result into a paragraph tag and it too has an ID of result. It’s a paragraph on the page and we’ll change this “And the answer is…” to whatever the result is from the division.