Using the Debugger Module #50

Question 1

Where is the “Debugger” tool found?

Answer 1

In the sources panel.

Question 2

What is a breakpoint in JavaScript?

Answer 2

In its simple form, a breakpoint is a breakpoint instruction put in your code. When the browser meets it, it stops.

Question 3

What’s another way to set a breakpoint in the code?

Answer 3

Another option is to open the file in the Sources panel and click the number on the line you want to add a breakpoint:

Question 4

How can you remove a breakpoint

Answer 4

By double clicking on it

Question 5

What other kinds of breakpoints are there?

Answer 5

1. XHR/Fetch
2. DOM
3. Event Listener (triggered an event occurs like, clicks.)

Question 6

What’s displayed in the “Scope” panel?

Answer 6

Variables

Question 7

What happens inside of the “Watch” panel?

Answer 7

There is a small + button that you can use to watch any expression. You can also add expressions or call variables to see what they might do.

Question 8

What are the three main ways to control flow during debugging?

Answer 8

1. Normal (highlighted in blue)
2. Step over (resumes execution until the next line and then stops again.
3. Step out: goes back to the outer function that is calling the one you’re in.

Question 9

How could you temporarily edit a script in DevTools?

Answer 9

While the script is halted, edit the files and hit command/ctrl S for temporary saving

Question 10

How can you see what’s in the call stack?

Answer 10

The call stack is just below the Debugger and it will tell you how many function levels deep you are in the code.

You can move up too by clicking each function name.

Question 11

If you don’t want to step into the code because it is a trusted library or script what can you do to avoid inspecting it?

Answer 11

Right-click it in the call stack and press Blackbox script.