Developer Tools - The Pharaoh's Treasury Map

The page looks different from what you planned: the heading is too big, an image does not show up, and a button does not react. You can guess, change the code blindly and refresh the page for the tenth time - or you can look inside. Imagine you are an architect in Ancient Egypt. Before you lies a pyramid blueprint - but you have no tools to check whether the construction is stable. That is exactly what a programmer's work looks like without developer tools! Chrome DevTools is your "scribe's toolkit" - it lets you look beneath the surface of any web page.

What You Will Learn

In this module you will assemble a web builder's workshop. You will learn to:

• read the page's hieroglyph map in the Elements panel and change it live,
• confer with the browser in the console and follow the caravan routes in the Network panel,
• ask the Lighthouse oracle to judge your page,
• write faster with Emmet and check your code with a validator,
• prepare a page icon and a preview of the page for social media,
• speed up loading of images and fonts, and finally publish your page on the internet.

What Are Chrome DevTools?

Chrome DevTools (Developer Tools) is a set of tools built into the Google Chrome browser. You can open them in several ways:

• F12 - the fastest keyboard shortcut
• Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac)
• Right-click on a page element -> Inspect

The third way is the most convenient when you work on a specific element: you right-click, a context menu appears, you choose "Inspect", and DevTools opens with that element already selected. Firefox, Edge and Safari have similar tools, but in this course we use Chrome.

Elements Panel - "The Hieroglyph Map"

The Elements panel is like a map of hieroglyphs on a pyramid wall - it shows the entire HTML structure of the page. Here you can:

• View every HTML element on the page
• Edit text, attributes, and styles in real time
• Remove or add elements temporarily
• Inspect associated CSS styles

The panel's content is a tree of tags whose branches you can collapse and expand. For a simple page it looks like this:

1<!-- In the Elements panel you will see the entire structure: -->
2<html>
3  <head>
4    <title>My Page</title>
5  </head>
6  <body>
7    <h1>Welcome to the pyramid!</h1>
8    <p class="description">Exhibition description</p>
9  </body>
10</html>

This is the current state of the page, not the file itself: if a script has changed something, you will already see the new version here. Click on any element, and on the right side, in the Styles tab, you will see its CSS styles - you can edit them live! Double-clicking text or an attribute lets you change it, and the Delete key removes the selected element.

Remember, though, that all changes disappear when you refresh the page. DevTools is a sketchpad, not your file - move a finished idea into your code editor.

Console Tab - "The Pharaoh's Council Chamber"

The console is a place where you can communicate with the browser. Type document.title in it and press Enter, and the browser will answer with the page title from the <title> element. The page's code can also write to the console on its own - these three commands display three kinds of messages:

1<!-- Examples of console usage -->
2<script>
3  // Display a message
4  console.log("Welcome, pharaoh!");
5
6  // Display a warning
7  console.warn("Warning! Missing alt attribute on an image.");
8
9  // Display an error
10  console.error("Error: File style.css not found");
11</script>

console.log() prints ordinary information, console.warn() a warning on a yellow background, and console.error() an error on a red one. You will learn JavaScript in depth in the Space Mission world - for now it is enough to know where to look for messages.

The console also shows JavaScript errors and warnings - it is like a guard who informs you about problems on the page. When an image file or a stylesheet is missing, you will also see a red message with the code 404 here.

Network Tab - "The Caravan Routes"

The Network panel shows all resources loaded by the page - like a map of trade routes in Egypt. Here you will see:

• HTML, CSS, JS files - main page resources
• Images - graphics and icons
• Fonts - loaded fonts
• Load time - how long each resource takes to download
• HTTP status - whether the resource loaded correctly (200 = OK, 404 = not found)

The panel records traffic only while DevTools is open, so after switching to the Network tab, refresh the page (F5). The filters at the top, such as CSS, Img or Font, narrow the list down to the chosen type of file, and a red row with status 404 is most often a typo in a file path.

Lighthouse - "The Judging Oracle"

Lighthouse is a page audit tool. It evaluates your page in four categories:

• Performance - loading speed (0-100 points)
• Accessibility - accessibility for people with disabilities
• Best Practices - good programming practices
• SEO - search engine optimization

To run Lighthouse: DevTools -> Lighthouse tab -> click Analyze page load.

Besides scores from 0 to 100, you will get a list of specific problems with hints on how to fix them. The audit is best run in an incognito window, because browser extensions can distort the performance score. You will use Lighthouse again in the performance lesson, and the Network panel will come in handy when speeding up fonts and images.

My advice: keep DevTools open whenever you build a page - F12 will quickly become the key you press most often.

Practice

Open DevTools on the page from the editor below, inspect the heading and type document.title in the console:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Chrome DevTools - Practice</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Chrome Developer Tools</h1>
11
12    <section class="panel">
13        <h2>Elements Panel</h2>
14        <p>Right-click on this text
15           and select <strong>"Inspect"</strong>.</p>
16        <p>You will see the HTML structure of this page.</p>
17        <div class="box" id="demo-box">
18            Try changing my color in DevTools!
19        </div>
20    </section>
21
22    <section class="panel">
23        <h2>Console</h2>
24        <p>Open DevTools (F12), go to the Console tab
25           and type the following commands:</p>
26        <ul>
27            <li><code>document.title</code> - displays the page title</li>
28            <li><code>document.querySelector('h1').textContent</code> - heading text</li>
29            <li><code>document.getElementById('demo-box').style.background = 'gold'</code></li>
30        </ul>
31    </section>
32
33    <section class="panel">
34        <h2>Network Tab</h2>
35        <p>Open the Network tab in DevTools, then
36           refresh the page (F5). You will see all loaded files.</p>
37        <img src="https://placehold.co/400x200/d4af37/1a1a2e?text=Pyramid+in+Giza"
38             alt="Pyramid in Giza" width="400" height="200">
39    </section>
40
41    <section class="panel">
42        <h2>Lighthouse</h2>
43        <p>Go to the Lighthouse tab and run an audit.
44           Check the results in the categories:</p>
45        <ul>
46            <li>Performance</li>
47            <li>Accessibility</li>
48            <li>Best Practices</li>
49            <li>SEO</li>
50        </ul>
51    </section>
52</body>
53</html>

Remember: DevTools is the map of the pharaoh's treasury - before you start digging blindly, look at what really lies beneath the surface of the page.