Debugging Tools + Tips — Syntax Podcast 152

A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 152: Debugging Tools + Tips

0:00

LOUDNESS

Jun 12th, 2019

Debugging Tools + Tips

👇 Download Show✏️ Edit Show Notes

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/syntax for 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

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

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!