Playing: 047: How to Get Better at Debugging
Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components
Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
May 23rd, 2018
How to Get Better at Debugging👇 Download Show✏️ Edit Show Notes
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!
- 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)
- Use debugger commands in the browser
- Set breakpoints (race conditions)
- Use Source Maps
- Make full use of all console methods
- View your code in other browers
- Make sure your browser is up to date
- Step into and step over function
- Useful for especially tricky issues
- Look into Scope in dev tools panel
- Recreate it in CodePen or Create React App
- Helps to quarantine your code
- Verify where the problem actually is
- Take a break
- Helps clear your head and approach your problem from a different angle
- Rubber Duck Debugging
- Forcing yourself to talk it out will often reveal problems/issues
- Check Github issues / ask in Slack
- Leave your solution in the comments for others
- Use Node --inspect flag
- 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
- 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