Browser Tools - HTML Tutorial

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Browsers primarily display web pages, but for web developers, they are much more than that. Whenever you visit a page, your browser downloads the HTML source, images, and other files. This section explains how to access and use that information.

View Source

The most valuable browser tool for learning HTML is View Source. It displays the HTML code behind the page, letting you see how features are implemented. You can copy, experiment, and learn from this code on your own machine.

How to activate:

• Edge, Chrome, Firefox: Right-click on the page and select View Page Source.
• Safari: Control-click (or right-click) and select Show Page Source.
• Opera: Right-click and select View Page Source.

Keep in mind:

• It’s fine to copy and experiment with code for learning, but do not republish someone else’s code or content publicly.
• Most websites have messy or inefficient code. Use it for learning, but don’t assume it’s the “best practice.”

Save Images

Browsers automatically download images when loading a page. You can save these images for educational use.

How to activate:

• Edge, Chrome: Right-click on the image → Save image as…
• Firefox: Right-click → Save Image As… or View Image to see it alone, or Properties to see file details.
• Safari: Control-click → Save Image to Desktop or Open Image in New Window.
• Opera: Right-click → Save Image As…, Open Image, or Image Properties.

Do not reuse copyrighted images publicly without permission. Use free image repositories or Creative Commons–licensed images instead: Creative Commons Image Licenses.

Developer Tools

Modern browsers come with powerful Developer Tools that give you detailed insight into a web page’s structure, styles, network activity, and more. These tools are essential for debugging, inspecting elements, and learning how websites are built.

How to open Developer Tools:

• Edge / Chrome: Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or right-click on the page and select Inspect.
• Firefox: Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or right-click and select Inspect.
• Safari: Enable the Develop menu in Preferences → Advanced, then press Option+Cmd+I or right-click → Inspect Element.
• Opera: Press Ctrl+Shift+I (Cmd+Option+I on Mac) or right-click → Inspect.

Developer Tools typically provide several panels:

• Elements / Inspector: View and edit the HTML structure and CSS styles in real time.
• Console: See JavaScript errors, test scripts, and interact with the page using JavaScript commands.
• Network: Monitor all files loaded by the page, including images, scripts, and CSS.
• Sources / Debugger: Inspect JavaScript code and set breakpoints for debugging.
• Performance / Timing: Analyze page loading speed and resource usage.

Using Developer Tools, you can experiment by editing HTML or CSS directly in the browser and immediately see the results. This makes it an invaluable learning and debugging tool for both beginners and professional developers.