Skip to content

Latest commit

 

History

History
58 lines (37 loc) · 1.31 KB

Lesson12-Debugging.md

File metadata and controls

58 lines (37 loc) · 1.31 KB

Lesson

How to debug in chrome and using vs code

Prior Homework assessment

Lesson objectives

  • How to debug in chrome
  • Live server extension vs code
  • Debug using VS code

Lesson time to deliever:

Unknown...

Teacher instruction

Debugging chrome

Open up debugger - F12 or inspect page

Inpect Html elements

  • View elements
  • change styles

Breakpoints (on JS only. Don't demo on Css or html)

  • Resume, continue on breakpoints
  • Step over
  • Step in and out of the
  • Execute code/call a function using console when on a breakpoint
  • View variables in local window. And change variable using the console

Debugger command

Build lesson plan around debugging in chrome from this. Demonstrate with a project with bugs. Step through to find bugs. https://javascript.info/debugging-chrome

Live server:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Get students to intall in VS Code. Then quick demo on how to start it and make sure everyone has done it

Debugging chrome in VS code

Course materials

Additional course materials that teachers should review and can be used

Recommendations

  • Additional notes

Homework

  • Get them to create a Js project. Debug through it.
  • OR Maybe make a project and find bugs in that project