Syntax - Tasty Web Development Treats

How to Get Better at Debugging

17 snips

May 23, 2018

Dive into the art of debugging with tips for reading stack traces like a treasure map. Discover how to avoid pitfalls of debugging in production and learn to inspect network responses for those tricky CORS errors. Get hands-on with breakpoints and console methods to streamline your process. Take a step back, talk it out with a 'rubber duck,' or isolate issues in CodePen. Plus, explore advanced DevTools for profiling and browser-specific troubleshooting. Whether debugging client-side or server-side, these strategies will sharpen your skills!

Ask episode

AI Snips

Chapters

Transcript

Episode notes

ADVICE

Read Library Source Code

Read a library's source when docs are unclear to understand exact argument shapes, defaults, and undocumented behavior.
Inspecting implementation often reveals hidden features or causes of bugs without filing issues.

INSIGHT

Explore Beyond Elements And Console

DevTools contain many underused tabs beyond Elements and Console that reveal hidden performance and layout issues.
Learning less obvious tools can drastically speed debugging and surface edge-case problems.

ADVICE

Profile With The Performance Tab

Use the Performance tab to record a session and inspect the call stack waterfall, screenshots, and CPU/network throttling.
Analyze long tasks and expensive functions to guide targeted performance improvements.

Get the Snipd Podcast app to discover more snips from this episode

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