Chrome debugging

Learning objectives:

Most students should:

• Understand how to debug javascript code in chrome

Students will already:

• Have had roughly .30 hours of tuition and practise in javascript

• Understand how to run html with a linked js file in a browser

• Will have familiarity with codepen

Resources you can use:

• https://javascript.info/debugging-chrome

Detailed Notes:

We recommend you use visual studio code as your IDE. This is the IDE students are familiar with. Codepen can be used instead.

Students need to know:

1. How Open up debugger - F12 or inspect page

2. How to inspect Html elements

   • View elements

   • Change element styles using the chrome debugger

3. How to set breakpoints (on JS only. Don't demo on Css or html).

   • Resume, continue on breakpoints

   • Step over a line

   • Step in and out of a function

   • Execute code/call a function using the console when on a breakpoint

   • View variables in local window. And change variable using the console

   • The 'debugger' command

function hello(name) {
  let phrase = `Hi ${name}.`;

  debugger;  // <-- the debugger stops here
}

4. For the exercises give the students code to debug through. The goal can be to work out the value of a variable by debugging through its execution. Or to fix a (deliberate) bug in the code.