How to Get Better at Debugging

How to Get Better at Debugging

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

Avsnitt(934)

How to Slam Dunk Freelancing 🏀🤑

How to Slam Dunk Freelancing 🏀🤑

Sponsor Deliciousbrains WP Migrate DB Pro - Use the code SYNTAX for 20% off Show Notes Stickers - SOLD OUT MORE SOON Scott's Personal Website on Gatsby Gatsby Codealong Gatsby MJML Email Framework The E-Myth Revisited Book Design is a Job Breaking the Time Barrier Basecamp Trello Freshbooks Wave Sick Picks Hyper Key + Karabiner Elements Better Touch Tool King of the Road Twitter Wes Bos Scott Tolinski Syntax

2 Aug 201758min

JavaScript Tooling - 004

JavaScript Tooling - 004

Show Notes Deliciousbrains WP Migrate DB Pro WesBos Website Level Up Tutorials WHY USE WWW? Webpack Babel ESLint Prettier Babili Prepack Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma. CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace. Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. React Native for everyone Twitter Wes Bos Scott Tolinski

26 Juli 201749min

CSS Preprocessors and Structuring CSS - 003

CSS Preprocessors and Structuring CSS - 003

Show Notes WesBos Website Level Up Tutorials GraphQL Dinosaur JS Conference Angular Pug / Jade EJS BEM Methodology Stylus Rupture Less Sass PostCSS PostCSS Autoprefixer RuckSack cssnext LostGrid Bootstrap Haml Babel Flickity Plugin webpack Compass React Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar. Vanilla Hide menu bar icons on your Mac. Power Blocks One set of Power Block replaces racks of dumbbells Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. The Sketch Course & UX Prototyping with Principle Combo Limited Sale Price: $39.99 $49.99 Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world. Animate Your Ideas, Design Better Apps Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. Twitter Wes Bos Scott Tolinski

19 Juli 20171h 3min

Webcam and audio access with WebRTC and getUserMedia() - 002

Webcam and audio access with WebRTC and getUserMedia() - 002

Show Notes WebRTC Apple WebRTC Support GetUserMedia Slack WebTorrent https://github.com/webtorrent/webtorrent Soctt WebRtc Mirror - TBC MediaRecorder Electron Kap Wes Security Cam Scott Colorbars YouTube - TBC Wes Face Detection Fluent Conf Sick Picks Peak Design Everyday Backpack Everyday Backpack Video Quik by GoPro Splice Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. Level Up Tutorials Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free video tutorials. Twitter @Syntax @wesbos @stolinski

12 Juli 201740min

React Tools - 001

React Tools - 001

Show Notes Wes Bos' Site Level Up Tutorials site Level Up Tutorials YouTube channel Scott Tolinski personal site Cloudflare Next.js Hacker News Example in Next.js GraphQL Graphcool create-react-app React dev-tools Redux dev-tools Preact.js React Storybook Meteor Blaze Sick Picks Wes: Parcel App Scott: Fish shell Shameless Plugs Learn Node React Native for everyone

5 Juli 201750min

Syntax 000 - PREVIEW

Syntax 000 - PREVIEW

Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm

27 Juni 20172min

Populärt inom Politik & nyheter

svenska-fall
p3-krim
rss-viva-fotboll
flashback-forever
rss-krimstad
fordomspodden
rss-sanning-konsekvens
aftonbladet-daily
rss-vad-fan-hande
svd-dokumentara-berattelser-2
olyckan-inifran
dagens-eko
motiv
rss-frandfors-horna
krimmagasinet
rss-krimreportrarna
blenda-2
svd-nyhetsartiklar
spar
svd-ledarredaktionen