Debugging Tools + Tips

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

Release date

Lydbog: 12. juni 2019