Monitor JavaScript Execution
Learning Objectives
After completing this unit, you'll be able to:
- Track JavaScript variables.
- Manipulate JavaScript variables.
If you're used to troubleshooting JavaScript, then you're probably familiar with the console.log()
command. It's your friend on the inside that tells you what's happening while the JavaScript is running. It shows what variables are doing at different states in the script. What if I told you there's a faster, cleaner way to get that info, an even better friend? DevTools Watch is that new friend. Let's dig in.
Follow Along with Trail Together
Want to follow along with experts as you work through this step? Take a look at this video, part of the Trail Together series on Trailhead Live.
(This clip starts at the 39:54 minute mark, in case you want to rewind and watch the beginning of the step again.)
Watch
Now you know how to set breakpoints and see the flow of the code and the values of variables. But there's a better way to monitor those variables and their values at certain times during code execution. Use Watch in the JavaScript Debugging pane.
Make the Solutions App Count by Two
You've seen the Solutions app add one to the count each time you click +1. Now, use the Control Option to make the count increase by two.
- Refresh the page in your browser. Your breakpoints should still be displayed.
- If it isn't already open, open display.js in DevTools.
- Find the
handleAugmentorChange(event)
function. - In the JavaScript Debugging pane expand Watch and click Add watch expression ().
- Enter
event.target.value
and press Enter. Watch displays:event.target.value: <not available>
Let's set a breakpoint and fire the event. - Click the line number for
this.augmentor = event.target.value;
to set a breakpoint. - In the Solutions app, under Control Option, select 2. Watch now shows that the value of event.target.value is “2”. Because we're paused in the handleAugmentorChange event handler, the
event.target.value
is active and Watch shows its value. - In the JavaScript Debugging pane, add
this.augmentor
to Watch. Notice that the value ofthis.augmentor
is still 1. This line of code hasn't run yet. - Click Step () to execute this line and step to the next line. Now execution is paused after the line with the breakpoint and Watch shows:
event.target.value: "2"
this.augmentor: "2"
- Click Resume script execution (). Notice that the Solutions app's Controls buttons have changed to -2 and +2.
Watch the Solutions App Count by Two
In the Solutions app, under Display, the Count is currently zero. Observe how the variables change in the code when you click the +2 button in the Solutions app.
- Click +2. The breakpoint pauses code execution at the first line of the
handleIncrement
function. Now Watch shows:event.target.value: undefined
this.augmentor: "2"
- Add
operand
andthis.counter
to Watch. Theoperand
is undefined andthis.counter
is zero. - Click Resume script execution (). Wait… the next breakpoint didn't pause so we could see the value of operand change. In the Solutions app, the Count is now 2. Let's do it again. It should pause this time.
- Click +2. Now Watch shows:
event.target.value: undefined
this.augmentor: "2"
operand: undefined
this.counter: "02"
Why isthis.counter
set to “02”? Let's see if we can figure out why it's not just 2. - Click Resume script execution (). When the script pauses again, Watch shows:
event.target.value: undefined
this.augmentor: "2"
operand: "2"
this.counter: "02"
- Click Resume script execution (). You made it! But... look at the Count value in the Solutions app. Why is the count 22 instead of 4? It looks like the Solutions app is concatenating instead of adding. This is where Watch gets exciting.
Watch Monitors Expressions as Well as Properties
Let's check the data type of the variable that the +2 button changes.
- Add
typeof operand
to Watch. Thetypeof operand
is undefined. - Click +2. Watch shows:
event.target.value: undefined
this.augmentor: "2"
operand: undefined
this.counter: "022"
typeof operand: "undefined"
- Click Resume script execution (). There it is! The operand variable is set as a string.
You can see the power that Watch brings to troubleshooting. Next, let's pinpoint the problem and find a way to fix it.
Console
To investigate this issue further, you use the DevTools Console.
- Refresh the page in your browser. Your breakpoints and watched items should still be displayed.
- In the Solutions, app click +1.
- In Watch, check the values of
this.augmentor
andthis.counter
. Boththis.counter
andthis.augmentor
appear to be numbers, but let's confirm that. - Add
typeof this.counter
andtypeof this.augmentor
to Watch. Yep, Watch shows that they're currently numbers. - Click Step () to step to the next line.
All numbers. So far, so good.
- Click Step () to step to the next line. OK,
this.counter
changed from 0 to 1. Let's do it again to see what happens. - Click Resume script execution (). In the Solutions app, Count is 1.
- In the Solutions app, click +1.
- Step through the code and notice that the numbers are still numbers and
this.counter
is now 2, as it should be.
Everything appears to be working as expected.
Let's Try Using the Control Option and See What That Does to Our Values
- Click Resume script execution (). In the Solutions app, Count is now 2.
- In the Solutions app, under Control Option, select 2. The script runs until it reaches the breakpoint in the handleAugmentorChange function. The script paused inside the function, but the breakpoint's line of code hasn't run yet. Notice that
event.target.value
looks like a string. - Add
typeof event.target.value
to Watch. Sure enough, it's a string. This confirms our suspicion that the Solutions app is concatenating where it should be adding.
Let's use the Console to manipulate values and see what happens.
- Click the Console tab.
- In the console, enter
event.target.value
and then press Enter. The console returns “2”. Notice the quotation marks around the 2 to denote a string. Because you're still paused at the breakpoint, you can use the variables in their current state. - Enter
this.augmentor = event.target.value
and then press Enter. Again, the console returns “2”. That's not what it should be. Somehow the code changed this.augmentor from a number to a string. Let's see if we can find a solution. - Enter
this.augmentor = 1
and then press Enter to change it back to a number. - Enter
this.augmentor = parseInt(event.target.value)
and then press Enter. The value changes to 2 and remains a number. So now we know how to fix the code. - Enter
this.augmentor = 1
to restore the original value. - Return to the Sources panel.
- Click Step () to step to the next line and check the value of
this.augmentor
. It's a string.
Pause This Unit
Scroll to the end of this unit and complete the hands-on challenge. When you finish checking the challenge, come back here to walk through the solution in your Trailhead Playground.
Resume This Unit
Now let's confirm that the Solutions app behaves as expected.
- Refresh the page in your browser.
- In the Solutions app, under Control Option, select 2. The script runs until it reaches the breakpoint in the handleAugmentorChange function.
- Click Step () to step to the next line.
- Check the value of this.augmentor. It's still a number! Excellent.
- Click Resume script execution ().
- In the Solutions app, click +2.
- Click Step () to step to the next line. Watch shows:
event.target.value: undefined
Still looking good.
this.augmentor: 2
operand: 2
this.counter: 0
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number" - Click Step (). Watch shows:
event.target.value: undefined
this.augmentor: 2
operand: 2
this.counter: 2
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number"this.counter
is now the number 2. - Click Resume script execution (). In the Solutions app, the Count is 2.
- In the Solutions app, click +2.
- Click Resume script execution (). The script runs until it reaches the conditional breakpoint and then pauses. Note that this.counter is still 2.
- Click Resume script execution () and notice that the Count in the Solutions app is 4, as it should be. Ta-da!
So, how do you like your new best friend DevTools? This module only scratches the surface of how DevTools can help you troubleshoot your Lightning web components. Be sure to check out the resources for more ideas.