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