How to use browser developer tools to see how a web page is built

What you need

• A computer with Microsoft Edge or Google Chrome installed.
• A web page you are curious about. For example, a travel guide you are reading while planning a weekend trip.
• About 15 minutes. You only need to look and experiment. Nothing here requires you to know how to code.

Developer tools are built into the browser. They appear next to the page you are viewing, so you can see the page and its structure at the same time.

Step by step

1. Open the web page you want to explore. Example: a hotel listing page you are reading for your trip. Keep the page open in its own tab.

2. Right-click an item on the page. Choose a heading, a button or a picture. This tells the browser which part you want to examine.

3. Select Inspect from the menu. Developer tools open, and the item you clicked is highlighted in a list called the DOM tree in the Elements tool. The DOM tree shows the parts of the page arranged inside one another, like folders in a file system.

4. Try another way to open the tools if needed. In Microsoft Edge, select Settings and more (…) on the toolbar, then More tools, then Developer tools. In Google Chrome on Windows, press Control + Shift + I. On a Mac, press Command + Option + I.

5. Find the Activity Bar and the Quick View toolbar. The Activity Bar sits at the top and holds icons for the tools. The Quick View toolbar sits at the bottom and holds tabs for opening tools. Click a tab or icon to switch between tools.

6. Look at the styling tools. These let you inspect and change the styles of elements in the page. Try changing one value to see what happens. Changes you make here affect the page shown in your browser, so treat them as experiments.

7. Move the tools to a better position. You can dock DevTools to the right, left or bottom of the browser, or undock it into its own window. Pick whichever layout lets you see the page and the tools clearly.

8. Zoom the tools if the text is too small. Use the standard keyboard zoom shortcuts while DevTools is selected. The zoom for the tools is separate from the zoom for the page.

9. Show or hide the Quick View panel. Press Esc to display it. Use it as a quick place to check things without leaving your main view.

Example prompt you can copy into an AI tool after you have copied a short, public piece of page code:

I am learning how web pages are built. Here is a short piece of public HTML from a travel guide page: [paste only public code]. Please explain in plain English what each part does, and point out any words I should look up.

Tips and common mistakes

• Do not panic at the code. Most of it is labels for parts of the page. Read one line at a time and focus on the item you right-clicked.
• Watch out for the F12 key. In Microsoft Edge, F12 can open DevTools. If you do not want that to happen, go to edge://settings/system, scroll to the Developer Tools section, and turn off the Use F12 key to open the Developer tools toggle.
• Do not assume edits are permanent. Changing styles in DevTools changes the page you are viewing, but it does not change the website for other visitors. Treat edits as practice.
• Use the keyboard when you can. The tools support keyboard shortcuts, which are helpful for accessibility and for quick navigation.
• Try a screenshot of one element in Chrome. In Chrome, press Control + Shift + P on Windows or Command + Shift + P on a Mac to open the Command bar. Type Screenshot and choose Capture node screenshot to capture one element you picked in the tools. Use Capture full-size screenshot for a very long page.

Use it responsibly

• Check what you read. Information you see in developer tools, or answers from an AI tool about it, can be wrong or out of date. Confirm important points with a trusted source.
• Protect your privacy. Never paste private data, such as passwords, bank details, personal messages or account information, into an AI tool or anywhere else while you explore. Only share public code.
• Keep your accounts secure. If a web page asks you to sign in while you are inspecting it, use a strong, unique password and turn on two-step verification where the service offers it.
• Follow the rules. If you use these tools at work or school, follow your organisation’s rules. Also follow the terms of the browser and of any service you use.