Mastering Developer Tools for Debugging

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!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets