Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Debugging Tools + Tips

Syntax - Tasty Web Development Treats

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.

<p>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.</p> <h2><a id="Netlify__Sponsor_9" name= "Netlify__Sponsor_9"></a>Netlify - Sponsor</h2> <p>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 <a href= "https://netlify.com/syntax">netlify.com/syntax</a>for more info.</p> <h2><a id="Freshbooks__Sponsor_13" name= "Freshbooks__Sponsor_13"></a>Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "http://freshbooks.com/syntax">Freshbooks.com</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>1:41 - Tools</p> <ul> <li>CLDD - console.log driven development</li> <li><a href= "https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints"> How To Pause Your Code With Breakpoints In Chrome DevTools</a></li> <li>Other types of break points <ul> <li>XHR</li> <li>DOM break on attribute change</li> <li>DOM break on children</li> <li>Conditional break</li> <li>Break on exception</li> <li>Break on event listener</li> </ul> </li> </ul> <p>21:49 - Network requests</p> <ul> <li>Doesn’t take place in your site/dom, so might not always have all info in your console, debugger</li> <li>Network tab in dev tools shows you all requests going in and out of your app</li> <li>Filters by type, sees length in request</li> <li>Sees headers, responses and more</li> <li>Failed requests will be red</li> </ul> <p>26:50 - Debugging mindset</p> <ul> <li>Check different browsers</li> <li>Check the docs/examples</li> <li>Isolate when possible</li> <li>“What has changed?”</li> <li>Get minimal working code</li> <li>Rubber Duck Debug</li> <li>Step back and re-think</li> </ul> <h2><a id="Links_49" name="Links_49"></a>Links</h2> <ul> <li><a href="https://www.youtube.com/watch?v=yFtU6_UaOtA">Debugging Visual Studio Code (Node) - James Q Quick</a></li> <li><a href="https://codepen.io/">CodePen</a></li> <li><a href= "https://www.youtube.com/channel/UC_uuod9nde9Hoea8xIVBeZQ">Spencer Carli’s Youtube</a></li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__55" name= "_SIIIIICK__PIIIICKS__55"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Wes: <a href="https://amzn.to/2LYJly1">DeWALT Lawn Mower</a></li> <li>Scott: <a href="https://amzn.to/2HuzCv8">Cold Brew Coffee Maker</a></li> </ul> <h2><a id="Shameless_Plugs_59" name= "Shameless_Plugs_59"></a>Shameless Plugs</h2> <ul> <li><a href="https://dillinger.io/wesbos.com/courses">Wes’ Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> <li><a href= "https://www.leveluptutorials.com/tutorials/level-2-react-native-with-graphql/connecting-apollo-to-our-auth-system"> Level 2 React Native with GraphQL</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_63" name= "Tweet_us_your_tasty_treats_63"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Debugging Tools + Tips

Poslechněte si podcast