If you are a beginner in the world of web development or just don't know the right steps and tools to master debugging like a real pro developer, in this video we will go through the pro tools and techniques that will help you effortlessly debug your Javascript and React applications and quickly identify performance issues as well as fix accessibility issues in your users' UI and layout. You will also learn how to use Chrome extensions to better work with your React components and Redux store.

time stamp
00:00 Why you should use debugging tools
01:37 Which project will we debug?
05:10 Elements tab and fixing your CSS flexbox layout
14:41 The power of the console
22:14 See all HTTP calls from your app via the Network tab
29:16 Debugging failed network calls
33:14 Sources tab and using VSCode to debug React apps
41:18 Pro React Chrome extensions to help you debug your apps
48:19 Custom React Debugging Libraries (WDYR)
56:56 Testing and diagnosing your app (performance, accessibility, SEO and more)

Master React like a pro with Redux, Typescript and GraphQL. Beginner to advanced in React
https://youtu.be/M_Oes39FNuk

Watch the tutorial on designing the website on Figma
https://youtu.be/SB3rt-cQZas

Watch how to create a modern React login/registration form with smooth animations
https://youtu.be/-bll7l-BKQI

The complete code used for debugging can be downloaded 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

Please take the opportunity to connect with your friends and family and share this video with them if you find it useful.