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
   • Master React Like Pro w/ Redux, Types...  

🧭 Watch Tutorial on Designing the website on Figma
   • I Design a onecolor Website in 1 hour...  

🧭 Watch Create a Modern React Login/Register Form with smooth Animations
   • Create a Modern React Login/Register ...  

⭐ You can get the Full Code Used for debugging from Github:
https://github.com/ipenywis/react-pro...


🐦 Follow me on Twitter:   / ipenywis  
💻 Github Profile: https://github.com/ipenywis
💡 My Blog: http://ipenywis.com


Made with 💗 by Coderone