Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
https://syntax.fm
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 - SponsorNetlify 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 - SponsorGet a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section.
Show Notes1: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
- Debugging Visual Studio Code (Node) - James Q Quick
- CodePen
- Spencer Carli’s Youtube
- Wes: DeWALT Lawn Mower
- Scott: Cold Brew Coffee Maker
- Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!
- Level 2 React Native with GraphQL
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets