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

🧭 Watch Tutorial on Designing the website on Figma

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

⭐ You can get the Full Code Used for debugging from Github:

Made with 💗 by Coderone

Рекомендации по теме

Комментарии

This video should have been 10 minutes long. It is way longer that it deserves.

nathanlemma

After I spent 30 mins on your video, I learn nothing, this video is not a teach tutorial, you just repeat every things you saw, but not present the real situation and how exactly you could use those infos to solve real project.

yiqvwwu

I'm software engineer with about 12 years of experience.
I highly appreciate your video, but I have to watch it x1.5 speed. When you present information, speak concisely, don't add a lot of extraneous information. Go straight to the point. By the minute 5, we should be already be debugging and doing things.

superbaran

you are like a politician you talk a lot but never get to the point

cheattube

What is that rainbow block highlighting extension called? I need something similar to show the code blocks

adriandeveraaa

I agree with @super baran.
Explanations are not the best and at times don't make sense.
It's good for an overview of what's available, but for the quality I received it should only be 15-20 minutes.

niosil

I'm 5 minutes in and he said, "so let's get started" for the third time now. Please try to make your videos more succinct.

CheeseBae

hey man, for feedback, here is a really concise React debugging video, type 'Tips and Tricks for Debugging React Applications' into YT. straight to the point, no fluff. As all the comments have mentioned, this was frustrating to watch, felt like a newbie developer giving advice on YT

ExplorationAT

this guys at least takes 5 mins to speak nonsense.

yiqvwwu

very useful tutorial. channel subscribed.

dcpotomac

Man you really need to think in advance what you would like to talk about. This video is about everything and nothing....Waste of time!

tomaszkapalka

Can you make one video on React - Sonar cube integration

shubhambansod

23:00 yo wtf :DDDD, anyways nice video

safsafaf

This was a good one. Just wanted to mention a point watching your video gave anxiety attack to me you have made a tutorial 1hr long and i see you talking so much about the things which are actually not needed you move your cursor here and there and the audience expects to see some practical work but sadly each time you don't do and start speaking something completely unrelated.
No hate man just wanted you to know this.

bhartiom