Chrome Developer Tools for Beginners

In the Chrome Developer Tools course we will have a detail look at what different options exist for developer to troubleshoot their web applications. Along with troubleshooting they can make live changes and see the effect. We will cover the following in this course.

• Getting comfortable with the tool
• Elements
• Source
• Console
• Network
• Performance
• Application
• Security
• Memory
• Lighthouse

We will start with by first getting comfortable with the developer tools by understanding what exist where, look and feel etc.Once we are kind of comfortable we will start with our tab which Elements. In this tab we will try to see how we can interact with web page via modifying styles and html. Its more from page structure and beautifications we are troubleshooting which is HTML and CSS part.

Then we will move towards troubleshooting of Javascript part via sources tab. We will look at different types of breakpoints, source code modification option, overrides etc. It is perfectly logical to cover the console part as next step because source and console work hand in hand. Console is like a REPL in browser where you can try your own stuff.

Since now we have fair bit covered the HTML,CSS and Javascript troubleshooting it makes sense to understand how do we trouble shoot server side request and browser local storage. So we will have a look at Network and Application tab.Now from an application points of view pending is performance and security that is why we will move towards lighthouse, performance, memory and security tab’s to understand these aspect in details.

We will wrap up the course by setting the context of what to do next?