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.)

Use the Watch Feature

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.

1. Refresh the page in your browser. Your breakpoints should still be displayed.
   
2. If it isn't already open, open display.js in DevTools.
   
3. Find the handleAugmentorChange(event) function.
   
4. In the JavaScript Debugging pane expand Watch and click Add watch expression .
   
5. Enter event.target.value and press Enter.
   Watch displays: event.target.value: <not available>

Let's set a breakpoint and fire the event.

1. Click the line number for this.augmentor = event.target.value; to set a breakpoint.
   
2. 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.
   

3. In the JavaScript Debugging pane, add this.augmentor to Watch.
   Notice that the value of this.augmentor is still 1. This line of code hasn't run yet.
   

4. Click Step over 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"

5. 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.

1. 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"
   

2. Add operand and this.counter to Watch. The operand is <not available> and this.counter is zero.
   Watch shows:
   event.target.value: undefined
this.augmentor: "2"
operand: <not available>
this.counter: 0
   

3. 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.
   
4. Click +2.
   Now Watch shows:
   event.target.value: undefined
this.augmentor: "2"
operand: <not available>
this.counter: "02"

5. Click Resume script execution . When the script pauses again,
   Watch shows:
   event.target.value: undefined
this.augmentor: "2"
operand: "2"
this.counter: "02"

6. 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 text instead of adding numbers. 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.

1. Add typeof operand to Watch. The typeof operand is undefined.
   
2. Click +2.
   Watch shows:
   event.target.value: undefined
this.augmentor: "2"
operand: <not available>
this.counter: "022"
typeof operand: <not available>
   

3. Click Resume script execution .
   Watch shows:
   event.target.value: undefined
this.augmentor: "2"
operand: <not available>
this.counter: "022"
typeof operand: "string"
   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.

1. Refresh the page in your browser. Your breakpoints and watched items should still be displayed.
   
2. In the Solutions, app click +1.
   
3. In Watch, check the values of this.augmentor and this.counter.
   Watch shows:
   event.target.value: undefined
this.augmentor: 1
operand: <not available>
this.counter: 0
typeof operand: <not available>
   Both this.counter and this.augmentor appear to be numbers, but let's confirm that.
   

4. Add typeof this.counter and typeof this.augmentor to Watch.
   Yep, Watch shows that they're currently numbers.
   event.target.value: undefined
this.augmentor: 1
operand: <not available>
this.counter: 0
typeof operand: <not available>
typeof this.counter: "number"
typeof this.augmentor: "number"
   

5. Click Step over to step to the next line.
   Watch shows:
   event.target.value: undefined
this.augmentor: 1
operand: 1
this.counter: 0
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number"
   All numbers. So far, so good.
   

6. Click Step over to step to the next line.
   Watch shows:
   event.target.value: undefined
this.augmentor: 1
operand: 1
this.counter: 1
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number"
   

OK, this.counter changed from 0 to 1. Let's do it again to see what happens.

1. Click Resume script execution . In the Solutions app, Count is 1.
   
2. In the Solutions app, click +1.
   
3. 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.
   

Try Using the Control Option and See What That Does to the Value

1. Click Resume script execution . In the Solutions app, Count is now 2.
   
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.
   

3. Add typeof event.target.value to Watch.
   event.target.value: undefined
this.augmentor: 1
operand: 1
this.counter: 1
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number"
typeof event.target.value: "string"
   Sure enough, it's a string. This confirms that the Solutions app is concatenating text where it should be adding numbers.
   

Let's use the Console to manipulate values and see what happens.

1. Click the Console tab.
   
2. 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.
   

3. 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.
   
4. Enter this.augmentor = 1 and then press Enter to change it back to a number.
   
5. 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.
   
6. Enter this.augmentor = 1 to restore the original value.
   
7. Return to the Sources panel.
   
8. Click Step over to step to the next line and check the value of this.augmentor.
   Watch shows:
   event.target.value: "2"
this.augmentor: "2"
operand: <not available>
this.counter: 2
typeof operand: "undefined"
typeof this.counter: "number"
typeof this.augmentor: "string"
typeof event.target.value: "string"
   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.

1. Refresh the page in your browser.
   
2. In the Solutions app, under Control Option, select 2. The script runs until it reaches the breakpoint in the handleAugmentorChange function.
   

3. Click Step over to step to the next line.
   
4. Check the value of this.augmentor.
   
   It's still a number! Excellent.
   

5. Click Resume script execution .
   
6. In the Solutions app, click +2.
   
7. Click Step over to step to the next line.
   Watch shows:
   event.target.value: undefined
this.augmentor: 2
operand: 2
this.counter: 0
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "number"
typeof event.target.value: "undefined"
8. Click Step over .
   Watch shows:
   event.target.value: undefined
this.augmentor: 2
operand: 2
this.counter: 2
typeof operand: "number"
typeof this.counter: "number"
typeof this.augmentor: "string"
typeof event.target.value: "undefined"
9. Click Resume script execution . In the Solutions app, the Count is 2.
   
10. In the Solutions app, click +2.
    
11. Click Resume script execution . The script runs until it reaches the conditional breakpoint and then pauses. Note that this.counter is still 2.
    
12. 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.

Resources

• Chrome DevTools: JavaScript Debugging Reference
• Chrome DevTools: Pause Your Code with Breakpoints
• Salesforce Developers Blog: Step Up Your LWC Skills - Part 2