Playing: 152: Debugging Tools + Tips
LOUDNESS
Episode 574
|Feb 10th, 2023
Supper Club Γ Qwik framework from MiΕ‘ko Hevery, the Creator of Angular
Episode 393
|Oct 4th, 2021
Hasty Treat - Spicy Takeout - PHP Is Good and Weβre Just Re-Creating It
Jun 12th, 2019
Debugging Tools + Tips
π Download ShowβοΈ Edit Show NotesIn 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/syntax for 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
ΓΓΓ 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