In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible.

Netlify - Sponsor

Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.

Show Notes

1:41 - Tools

CLDD - console.log driven development
How To Pause Your Code With Breakpoints In Chrome DevTools
Other types of break points
- XHR
- DOM break on attribute change
- DOM break on children
- Conditional break
- Break on exception
- Break on event listener

21:49 - Network requests

Doesn’t take place in your site/dom, so might not always have all info in your console, debugger
Network tab in dev tools shows you all requests going in and out of your app
Filters by type, sees length in request
Sees headers, responses and more
Failed requests will be red

26:50 - Debugging mindset

Check different browsers
Check the docs/examples
Isolate when possible
“What has changed?”
Get minimal working code
Rubber Duck Debug
Step back and re-think

Links

Debugging Visual Studio Code (Node) - James Q Quick
CodePen
Spencer Carli’s Youtube

××× SIIIIICK ××× PIIIICKS ×××

Wes: DeWALT Lawn Mower
Scott: Cold Brew Coffee Maker

Shameless Plugs

Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
Level 2 React Native with GraphQL

Tweet us your tasty treats!

Debugging Tools + Tips

Syntax - Tasty Web Development Treats