Understanding the bottlenecks of the network and your application performance is crucial to start pinpointing where to debug. In this video, Emmanuel Henri explores the Chrome network and performance developer tools.
- [Instructor] Chrome and many popular browsers … have their own performance and profile tools … to get more granular into your performance inspection … of your application. … And for Chrome they're called Network and Performance. … Let's take a look at them. … So right now I have already some data here … because I already loaded the application at least once. … So let's go ahead and reload the application. … So when you do that, … and you want to make sure you're on the Network tab … inside of the DevTools. … Sorry if you don't have that open … you want to make sure you go to the three dots here. … And then More Tools and then Developer Tools. … Or Control + Shift + I for Windows … and Command + Shift + I for Mac. … So let's go ahead and reload the application like so. … And basically it's the exact same thing … that we were looking at when we looked at Profiler. … The only difference here it's everything … but more granularly the files themselves. … So the actual file for jQuery, materialize.css. …
- Setting up for React testing and debugging
- Testing with Jest
- Snapshot testing
- Debugging with Chrome and Chrome extensions
- Optimizing React code with ESLINT
- Type checking