Browser Developer Tools

In this lesson, we will explore the browser tools that enable us to navigate and comprehend the structure of an HTML document. The previous lesson introduced using an HTML document for this purpose. We will delve deeper into the tools available in a web browser to facilitate this process.

We will use Google Chrome for demonstration purposes, but similar functions are available in other browsers, such as Mozilla Firefox, Apple Safari, and Microsoft Edge.

Introduction to developer tools

The browser developer tools are built-in tools that provide insights into the HTML, CSS, and JavaScript code and allow us to debug our web code in real time.

There are several methods for accessing the browser developer tools. We can easily access the DOM or CSS of any webpage by right-clicking the desired element and selecting Inspect. Or, for even faster access, try using keyboard shortcuts like "Command+Option+C" (Mac), "Control+Shift+C/I" (Windows, Linux, Chrome OS), or "F12" (Internet Explorer, Edge).