Playing: 047: How to Get Better at Debugging
Apr 1st, 2020
Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout
Mar 25th, 2020
Potluck - Bootcamps × Career Change × Figma × Gatsby × AMP × Mongoose × More!
Feb 26th, 2020
Potluck - Next vs Gatsby × Headless CMS × Vue.js × Is Ruby on Rails still good? × More!
Jan 29th, 2020
Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!
Jan 27th, 2020
Hasty Treat - Building A Community Slack, Discord, Spectrum, Discourse, Forums
Jan 20th, 2020
Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components
Jan 1st, 2020
Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!
Dec 4th, 2019
Potluck - Tabs are better? × Coding Music × SEO × Is Angular good? × Biggie Smalls × Soy Sauce × More!
Nov 6th, 2019
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
Oct 9th, 2019
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Sep 18th, 2019
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Aug 21st, 2019
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Jul 31st, 2019
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Jun 26th, 2019
Potluck - Career Switch at 33 × Cover Letters × Kids × Learning Quickly × More!
May 29th, 2019
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
May 1st, 2019
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Apr 3rd, 2019
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
Mar 6th, 2019
Potluck - Are classes dead? × Tutorials vs Real Life × CRA vs Next × Scraping × More
Mar 4th, 2019
Hasty Treat - Authentication - LocalStorage vs Cookies vs Sessions vs Tokens
Feb 27th, 2019
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Feb 6th, 2019
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Jan 10th, 2019
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Dec 19th, 2018
Potluck - Typescript × E-commerce platforms × Job-hopping × Working for agencies × more
Dec 17th, 2018
Hasty Treat - Where are they now?! Gulp, Grunt, Bower, Backbone and Compass
Nov 21st, 2018
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Oct 26th, 2018
Potluck - Working with designers × Is WordPress Crap? × When to stop working × More
Aug 29th, 2018
Potluck - Programming Languages × Soft Skills × PHP vs JS × Breakdancing x Spice Blends
Aug 1st, 2018
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Jul 24th, 2018
The Undocumented Web - scraping, private APIs, proxies and “alternative solutions”
Jul 18th, 2018
Advice For Beginners - Tech Skills, Applying for Jobs, Focus, Imposter Syndrome + More
Jul 4th, 2018
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
May 9th, 2018
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Apr 18th, 2018
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Feb 7th, 2018
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Jan 31st, 2018
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Jan 24th, 2018
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Nov 29th, 2017
What's New in CSS? Variables, Scoping, New Selectors and Color Functions
Nov 1st, 2017
22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More
Oct 18th, 2017
Tasty Treats — Rems VS Ems, Remote Work, Making Money, Getting good at Design + 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