Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture 7

Debugging

One announcement before class

Welcome Sebastian!

Quiz time!

FCC & HW

Open to questions

Let's debug! 🐛

What we would cover?

• What is debugging?
• How do I debug
• Different Browsers

What is debugging?

🐛

Most essential tool

• Finding errors
• Investigate variables/return values
• Step-by-Step

Do you know one kind of debugger?

🤔

console.log

• Used by everyone
• Sometimes simplest and most effective form of debugging

Do you know another debugger?

🤔

DevTools of the browser

You've already seen the DevTools several times

Open your DevTools

macOS

⌥ + ⌘ + i

Windows / Linux

F12

Or via the menu

View -> Developer -> Developer Tools (Chrome)

Tools -> Developer -> Developer Tools (MS Edge)

Tools -> Web Developer -> Toggle Tools (Firefox)

Elements / Inspector

• HTML
• Styles
• You can manipulate it!

Console

• See the output of console.log
• read–eval–print loop (REPL)

Network

• See all network requests
• Investigate requests/responses
• Duration, size, ...

Sources / Debugger

• Take a look at the JS code
• Debug with Breakpoints
• Step-in, step-out, step-over, ....

Other tabs

• Application / Storage
• Memory
• Performance, Accessibility, Lighthouse, ...

How do I debug?

🐛

Debugging in 4 Steps

• Go to the Sources Tab
• Open the JS file
• Add a breakpoint
• Trigger the action

debugger;

• Trigger breakpoints from your code
• Only works, when DevTools are open

Differences between Browsers

Basically all DevTools have kind of the same functionality

Small differences between vendors

• Chrome wins with debugging/testing service workers
• Chrome wins with authoring tools
• Firefox has support better for CSS (Flexbox, CSS Grid)
• Don't be limited to Chrome or FF

API Demo

The hearth of your next app!

Homework review