Http Spikes

Debugging JavaScript

How would you effectively find out where (and why) an error is occurring in your JavaScript code?

Questions to consider

1. What console methods are there other than console.log? Can these help us debug?
2. What does the debugger; statement do?
3. How do we use the debugger in our browser?

Useful resources

• How to get the most out of the JavaScript console
• Get Started with Debugging JavaScript in Chrome DevTools

Debugging network requests

How can we send and receive test network requests while working on an application?

Questions to consider

1. How can we inspect any requests the browser is making on an HTML page?
2. How can we manually send test requests outside of our browser?

Useful resources

• Inspect Network Activity In Chrome DevTools
• Getting started with Insomnia

Debugging HTML & CSS

How can we find out why our page doesn’t look right?

Questions to consider

1. How can we see and edit what elements and styles are rendered to the page?
2. How can we easily test how responsive our page is?
3. How can we debug CSS grid and flexbox layouts?

Useful resources

• Viewing And Changing The DOM in Chrome DevTools
• Firefox Page Inspector
• Simulate Mobile Devices with Device Mode in Chrome DevTools
• A Guide To New And Experimental CSS DevTools In Firefox

Asynchronous JavaScript

How does JS handle asynchronous code?

Questions to consider

1. What’s the difference between “synchronous” and “asynchronous” code? Why might synchronous code be called “blocking”?
2. What are the event loop and the call stack?
3. How do callbacks and promises help us?

Useful resources

• Asynchronous concepts
• Introducing asynchronous JS
• What the heck is the event loop anyway? (video)