How to Get Better at Debugging
source link: https://syntax.fm/show/047/how-to-get-better-at-debugging
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.
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
- Read the stack trace
- Make sure you aren't debugging production
- Make sure you're not cached
- 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
- 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 piece of granite
Shameless Plugs
Tweet us your tasty treats!
Recommend
-
38
The golang debugging experience in VSCode is poor since viewing deeply nested variables is cutoff when you reach the 3rd level, and viewing strings is lmited to 64 characters which is almost never…
-
74
Contents: Debugging stack corruption issues Appendix: How to build gdb with Intel PT support Subscribe to mymailing list to get more updates from me! In thefirst par...
-
31
Better React Native Debugging with Reactotron in Flipper
-
7
How I got better at debugging • favorite • I had a performance review last week where I was told, among other things, that I’m very good at debugging, especia...
-
2
Releases Improved IDE Performance, Better Debugging Experience, and More for Kotlin in Latest IntelliJ IDEA ...
-
5
Some ways to get better at debugging Hello! I’ve been working on writing a zine about debugging for a while (here’s
-
9
The latest Elixir release introduces new features to improve your developer and debugging experience. In this post, we'll take a look at the new dbg() functionality, along with some improvements to Inspect and bina...
-
1
Node Weekly Issue 490 Easy to unsubscribe at any time. Your e-mail address is safe — here's
-
4
ASP.NET Core 8: Better contextual debugging experience 2023-06-18 by anthonygiretti Introduction
-
9
Better debugging for Cloudflare Workers, now with breakpoints11/28/20239 min read
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK