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/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.
1:41 - Tools
- CLDD - console.log driven development
- How To Pause Your Code With Breakpoints In Chrome DevTools
- Other types of break points
- 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