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 p

Learn How to Use the Chrome DevTools to Troubleshoot Websites

submited by

Style Pass

2021-05-12 04:06:53

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.

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.