Developer Tools - The Pharaoh's Treasury Map
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 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
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
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>Click on any element, and on the right side you will see its CSS styles. You can edit them live!
Console Tab - "The Pharaoh's Council Chamber"
The console is a place where you can communicate with the browser. Type any JavaScript code and you will immediately see the result:
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>The console also shows JavaScript errors and warnings - it is like a guard who informs you about problems on the page.
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)
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.