Understanding the tools used in this course and installing them is really important before getting started. In this video, Emmanuel Henri explores the internal browser developer tool that comes with Chrome and many popular browsers such as Firefox, Safari, and Edge.
- [Instructor] Testing and debugging React applications involves multiple tools. So I'll briefly introduce you to these as we install them over the course of the next few videos. For any type of web development, our first tool of choice is the dev tools that comes with our own browser. Whether you use Chrome, Safari, Firefox, or Edge, you have the tools needed to inspect your code, do performance checks, and more. In this course, we'll specifically use Chrome's internal tools. And I highly recommend that you use either Chrome or Firefox, as they offer solid performance and work with the extensions we'll use. So as a developer, you'll probably use Chrome's developer tools. But if not, you can access them on a Mac by doing Option-Command-I and on a Window, Control-Shift-I, like so. And let me position this at the bottom. So I'm going to click here and then position it at the bottom like so. And just going to increase the screen in state for that. And these are the elements that we're going to work with inside of this browser. So we have the source code for that application. We have the network, which is basically when we're trying to access elements inside of the application, the performance of the application, the memory use, and more related to development. So this is the foundation of our tool set. On top of this, we'll add an extension in the next video to help us inspect React components.
- 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