Podcasts Technology Syntax - Tasty Web Development Treats Debugging Tools + Tips

Debugging Tools + Tips

Published: June 12, 2019, 1 p.m.

In this episode of Syntax, Scott and Wes talk about debugging \u2014 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\xa0netlify.com/syntaxfor more info.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at\xa0Freshbooks.com and put\xa0SYNTAX\xa0in the \u201cHow did you hear about us?\u201d section.

Show Notes

1:41 - Tools

21:49 - Network requests

  • Doesn\u2019t 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
  • \u201cWhat has changed?\u201d
  • Get minimal working code
  • Rubber Duck Debug
  • Step back and re-think
Links \xd7\xd7\xd7 SIIIIICK \xd7\xd7\xd7 PIIIICKS \xd7\xd7\xd7 Shameless Plugs Tweet us your tasty treats!