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
