# 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](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

```javascript
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.



&#x20;

