Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

If you're a beginner to the web development world or just don't know the right steps and tools to use to get yourself to debug like a real pro developer well, in this video we will go through the set of pro tools and techniques to use to debug your Javascript and React applications with ease and quickly identify what performance issues and fix accessibility problems on your users' facing UI and layout you'll also learn how to use Chrome extensions for better working with your React components and your Redux store. ⭐ Timestamps ⭐ 00:00 Why you should use Debugging Tools 01:37 What Project we are going to debug 05:10 Elements tab and fixing your CSS Flexbox Layout 14:41 The Power of the Console 22:14 See all your app HTTP Calls through the network tab 29:16 Debugging failed network calls 33:14 Sources Tab and How to use VSCode to Debug React Apps 41:18 Pro React chrome extensions to help you debugging your apps 48:19 React Custom debugging libraries (WDYR) 56:56 Auditing and diagnosing your app (Performance, Accessibility, SEO, and more) 🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React https://youtu.be/M_Oes39FNuk 🧭 Watch Tutorial on Designing the website on Figma https://youtu.be/SB3rt-cQZas 🧭 Watch Create a Modern React Login/Register Form with smooth Animations https://youtu.be/-bll7l-BKQI ⭐ You can get the Full Code Used for debugging from Github: https://github.com/ipenywis/react-pro-debugging 🐦 Follow me on Twitter: https://twitter.com/ipenywis 💻 Github Profile: https://github.com/ipenywis 💡 My Blog: http://ipenywis.com Made with 💗 by Coderone