Syntax - Tasty Web Development Treats

How to Get Better at Debugging


Listen Later

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
    ...more
    View all episodesView all episodes
    Download on the App Store

    Syntax - Tasty Web Development TreatsBy Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

    • 4.9
    • 4.9
    • 4.9
    • 4.9
    • 4.9

    4.9

    977 ratings


    More shows like Syntax - Tasty Web Development Treats

    View all
    Software Engineering Radio - the podcast for professional software developers by team@se-radio.net (SE-Radio Team)

    Software Engineering Radio - the podcast for professional software developers

    272 Listeners

    Hanselminutes with Scott Hanselman by Scott Hanselman

    Hanselminutes with Scott Hanselman

    383 Listeners

    The Changelog: Software Development, Open Source by Changelog Media

    The Changelog: Software Development, Open Source

    290 Listeners

    Software Engineering Daily by Software Engineering Daily

    Software Engineering Daily

    622 Listeners

    Talk Python To Me by Michael Kennedy

    Talk Python To Me

    584 Listeners

    Soft Skills Engineering by Jamison Dance and Dave Smith

    Soft Skills Engineering

    288 Listeners

    Thoughtworks Technology Podcast by Thoughtworks

    Thoughtworks Technology Podcast

    43 Listeners

    Python Bytes by Michael Kennedy and Brian Okken

    Python Bytes

    215 Listeners

    The freeCodeCamp Podcast by freeCodeCamp.org

    The freeCodeCamp Podcast

    487 Listeners

    CoRecursive: Coding Stories by Adam Gordon Bell - Software Developer

    CoRecursive: Coding Stories

    189 Listeners

    Practical AI by Practical AI LLC

    Practical AI

    206 Listeners

    The Stack Overflow Podcast by The Stack Overflow Podcast

    The Stack Overflow Podcast

    63 Listeners

    The Real Python Podcast by Real Python

    The Real Python Podcast

    141 Listeners

    PodRocket by LogRocket

    PodRocket

    60 Listeners

    Oxide and Friends by Oxide Computer Company

    Oxide and Friends

    66 Listeners