> For the complete documentation index, see [llms.txt](https://tbhp.gitbook.io/web-course/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tbhp.gitbook.io/web-course/tech-tutorials/topics/chrome-debugging.md).

# 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

```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;