Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. They can be super helpful for web developers.
We just published a crash course that will teach you how to use Chrome DevTools to improve your productivity as a web developer. You will learn how to do things like troubleshoot and live-edit web pages.
Nabheet Madan created this course. He is a very experienced developer and he does an excellent job teaching how to incorporate Chome DevTools into your development workflow.
Here are the sections covered in this course:
- Getting comfortable with the tool
- Elements
- Source
- Console
- Network
- Performance
- Application
- Security
- Memory
- Lighthouse
After getting a general overview of the developer tools, you will learn about the Elements tab. In this tab you can interact with web pages by modifying styles and HTML.
Next, you will learn to troubleshoot Javascript using the Sources tab. You will learn different types of breakpoints, source code modification options, overrides, and more. After that, you will learn about the console. The console is like a REPL in your browser where you can try out code.
You will learn to troubleshoot server side requests and local storage using the Network and Application tabs. Finally, you will learn how to improve performance and security using the Lighthouse, Performance, Memory, and Security tabs.
You can watch the full course below or on the freeCodeCamp.org YouTube channel (1-hour watch).