Debugging with Chrome Developer Tools

Question 1

How do you open the Chrome Developer Tools?

Answer 1

super easy

Question 2

Use the debugger statement to pause execution in the Chrome Developer Tools.

Answer 2

…

Question 3

Use log values to the console in the Browser

Answer 3

super easy

Question 4

Set breakpoints in code using the Chrome Developer Tools

Answer 4

https://www.youtube.com/watch?v=KbEx0s06VLs @ 4:42

To debug in the Chrome browser run your program and open up the dev tools. Open up the Sources tab and the main.js file.

To set a breakpoint navigate click on function you want to set a breakpoint on. When you run the program the code will run everything up to the point where the breakpoint is declared.

Step in:
Step over:
Step out:
Continue:

Question 5

Inspect an element in the DOM using the Chrome Developer Tools.

Answer 5

super easy

Question 6

Change element styling using the Chrome Developer Tools.

Answer 6

super easy

Question 7

Inspect network requests using the Chrome developer tools

Answer 7

super easy

Question 8

Describe the JS call stack

Answer 8

…

Question 9

Use the debugger step in, step out, and step over function calls, in the Chrome Developer Tools.

Answer 9

…