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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tbhp.gitbook.io/web-course/tech-tutorials/topics/chrome-debugging.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.