Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How to Get Better at Debugging

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>Scott and Wes detail the tips and tools you need to get better at debugging.</p> <h2><a id="Freshbooks__Sponsor_9" name= "Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2><a id="Cofeecups_CSS_Grid_Builder_Tool_13" name= "Cofeecups_CSS_Grid_Builder_Tool_13"></a>Coffeecup’s CSS Grid Builder Tool</h2> <p>Check out Coffeecup’s <a href="https://cssgrid.cc/">CSS Grid.cc</a> builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!</p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>4:00</p> <ul> <li>Read the stack trace</li> </ul> <p>7:35</p> <ul> <li>Make sure you aren’t debugging production</li> <li>Make sure you’re not cached</li> </ul> <p>8:40</p> <ul> <li>Check the network panel for the whole response</li> <li>CORS (Cross-Origin Resource Sharing)</li> </ul> <p>12:04</p> <ul> <li>Use debugger commands in the browser</li> <li>Set breakpoints (race conditions</li> </ul> <p>13:40</p> <ul> <li>Use Source Maps</li> </ul> <p>15:29</p> <ul> <li>Make full use of all console methods <ul> <li>console.group/groupEnd/info/</li> <li>console.log({objNAme})</li> </ul> </li> </ul> <p>17:02</p> <ul> <li>View your code in other browers</li> <li>Make sure your browser is up to date</li> </ul> <p>18:50</p> <ul> <li>Step into and step over function</li> <li>Useful for especially tricky issues</li> </ul> <p>19:47</p> <ul> <li>Look into Scope in dev tools panel</li> </ul> <p>20:33</p> <ul> <li>Recreate it in CodePen or Create React App <ul> <li>Helps to quarantine your code</li> <li>Verify where the problem actually is</li> </ul> </li> </ul> <p>24:12</p> <ul> <li>Take a break <ul> <li>Helps clear your head and approach your problem from a different angle</li> </ul> </li> </ul> <p>25:40</p> <ul> <li>Rubber Duck Debugging <ul> <li>Forcing yourself to talk it out will often reveal problems/issues</li> </ul> </li> </ul> <p>26:40</p> <ul> <li>Check Github issues / ask in Slack <ul> <li>Leave your solution in the comments for others</li> </ul> </li> </ul> <p>28:12</p> <ul> <li>Use Node --inspect flag</li> </ul> <p>29:57</p> <ul> <li>Read the code in your libs (if you can)</li> </ul> <p>32:34 - Chrome Dev Tools Tabs Rundown</p> <ul> <li>33:10 - Network tab</li> <li>34:15 - Preformance tab</li> <li>35:58 - Lesser known tools <ul> <li>36:15 - Firefox Grid Debug</li> <li>36:20 - Firefox Fonts tab</li> <li>37:10 - More tools (three dots menu in top right of Chrome Dev Tools window)</li> <li>37:39 - Chrome Animations Inspector</li> <li>38:34 - <a href="https://umaar.com/dev-tips/">/dev tips</a> & <a href= "https://moderndevtools.com/">Modern DevTools Course</a></li> <li>39:41 - Chrome & FF Layers for 3d and full view of canvas & window</li> <li>40:51 - Sensors for overriding fake devices sensors <ul> <li>Hot tip: Use Instagram on the desktop - Go to <a href= "https://instagram.com/">Instagram</a> and set the user agent to iPad and it will work as it does on that actual device</li> <li>Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back</li> </ul> </li> <li>43:12 - Favorite DevTools extensions <ul> <li><a href= "https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en"> Apollo</a></li> <li><a href= "https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en"> React</a></li> <li><a href= "https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en"> Redux</a></li> <li><a href= "https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en"> Vue</a></li> <li><a href= "https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en"> Lighthouse</a></li> <li><a href= "https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en"> JSON Formatter</a></li> </ul> </li> </ul> </li> <li>44:06 - Application/Storage tab</li> <li>44:41 - FireFox Grid Inspector</li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__114" name= "_SIIIIICK__PIIIICKS__114"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://www.hoteltonight.com/">Hotel Tonight App</a></li> <li>Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite</li> </ul> <h2><a id="Shameless_Plugs_119" name= "Shameless_Plugs_119"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/store">Scott’s Level 2 React Course coming out THIS WEEK!</a> - subscribe and be notified when it’s released</li> <li><a href="https://wesbos.com/courses/">Wes’ Courses - Advanced React course coming soon</a> - subscribe to be notified when it’s released</li> </ul> <h2><a id="Tweet_us_your_tasty_treats_124" name= "Tweet_us_your_tasty_treats_124"></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>

Scott and Wes detail the tips and tools you need to get better at debugging.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!
 Show Notes 4:00
 Read the stack trace
 7:35
 Make sure you aren’t debugging production
 Make sure you’re not cached
 8:40
 Check the network panel for the whole response
 CORS (Cross-Origin Resource Sharing)
 12:04
 Use debugger commands in the browser
 Set breakpoints (race conditions
 13:40
 Use Source Maps
 15:29
 Make full use of all console methods console.group/groupEnd/info/
 console.log({objNAme})

 17:02
 View your code in other browers
 Make sure your browser is up to date
 18:50
 Step into and step over function
 Useful for especially tricky issues
 19:47
 Look into Scope in dev tools panel
 20:33
 Recreate it in CodePen or Create React App Helps to quarantine your code
 Verify where the problem actually is

 24:12
 Take a break Helps clear your head and approach your problem from a different angle

 25:40
 Rubber Duck Debugging Forcing yourself to talk it out will often reveal problems/issues

 26:40
 Check Github issues / ask in Slack Leave your solution in the comments for others

 28:12
 Use Node --inspect flag
 29:57
 Read the code in your libs (if you can)
 32:34 - Chrome Dev Tools Tabs Rundown
 33:10 - Network tab
 34:15 - Preformance tab
 35:58 - Lesser known tools 36:15 - Firefox Grid Debug
 36:20 - Firefox Fonts tab
 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window)
 37:39 - Chrome Animations Inspector
 38:34 - /dev tips & Modern DevTools Course

 39:41 - Chrome & FF Layers for 3d and full view of canvas & window
 40:51 - Sensors for overriding fake devices sensors Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device
 Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back

 43:12 - Favorite DevTools extensions  Apollo
 React
 Redux
 Vue
 Lighthouse
 JSON Formatter

 44:06 - Application/Storage tab
 44:41 - FireFox Grid Inspector
 ××× SIIIIICK ××× PIIIICKS ××× Scott: Hotel Tonight App

 Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite
 Shameless Plugs 
Scott’s Level 2 React Course coming out THIS WEEK! - subscribe and be notified when it’s released

Wes’ Courses - Advanced React course coming soon - subscribe to be notified when it’s released
 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

How to Get Better at Debugging

Poslechněte si podcast