Debugging Tools + Tips
source link: https://syntax.fm/show/152/debugging-tools-tips
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
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
- 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 ×××
Shameless Plugs
Tweet us your tasty treats!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK