Tutorial: How to Inspect, Edit, and Save a Web Page (2024)

This tutorial from the HTML Fundamentals Class I taught at Clark College in Vancouver, Washington, is a guide that will show you how to:

• View the source code of a web page.
• How to save a web page to your computer
• How to view a saved web page on your computer
• How to open a web page in your text editor
• How to view the CSS/Stylesheet for a web page
• How to inspect the HTML and CSS of a web page
• How to view and edit a web page at the same time

To begin this tutorial, have your web browser and text editor open on your computer. It does not matter which browser or text editor you are using. The process is basically the same.

How to view the source code of a web page

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose View Page Source or View Source.
3. The resulting popup window (or tab) will show you the underlying HTML structure of the page.
4. You may save this to your hard drive or go back and save the entire web page to your computer.

How to save a web page to your computer

1. Go to a web page such as the test page for the class, Welcome to Lorelle VanFossen CTEC 122 HTML Fundamentals Class on the Clark Web Server.
2. Right click on an empty space on the web page and choose Save Page As or Save As.
3. Choose a file name to remind you of the purpose or content of the page.
4. Save the web page to an appropriate spot on your computer’s hard drive, such as with the rest of your class materials.

How to view a saved web page on your computer

1. In a file manager, locate the HTML version of the page in the folder where you saved it.
2. You will find the HTML page file and a folder with the same name as the web page you saved. Images and supporting code and content are found in that folder.
3. Double click on the HTML page.
4. The page will appear in your browser tabs.

How to open a web page in your text editor

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. Choose the file and click Open or Okay.
4. The result will not be the pretty web page but the HTML source code for the web page.
5. NOTE: If you choose to experiment and edit the web page, please save it with a different name or version number.

How to view the CSS/Stylesheet for a web page

1. From within the Text Editor, choose File > Open, just as you would with a word processor.
2. In the file window, locate the HTML version of the page in the folder where you saved it.
3. In the same folder or in the accompanying folder, look for a file with the extension .css. There may be multiple CSS files. Choose the one named styles.css, stylesheet.css, or another similar name.
4. Choose the file and click Open or Okay.
5. The result will be the CSS styles for the web page.
6. NOTE: If you choose to experiment and edit the stylesheet, please save it with a different name or version number.

How to inspect the HTML and CSS of a web page

Most web browsers come with some form of web developer tool built-in. You may also add web browser extensions to inspect the HTML, CSS, and underlying technologies of a web page. Check the browser documentation as well as the source documentation from the list below.

• Firebug
• Web Developer
• Google Chrome Web Developer Tools
• Internet Explorer Web Developer Toolbar

You can find more "secret" web development tools in an article by Andi Smith with tips on which ones are built-in and how to use them. Also check out 15 Helpful In-Browser Web Development Tools from Smashing Magazine.

How to view and edit a web page at the same time

1. Open your web browser and text editor.
   • If you have a large screen or more than one screen, move the web browser to one and the text editor to another.
   • If you do not have a large screen, use a keyboard shortcut like ALT+TAB or Command+TAB to quickly switch between them, or position the windows next to each other so they split the screen.
2. Open the file you wish to edit in the text editor and in the web browser (File > Open).
3. Make edits to the file in the text editor and save them.
4. Switch focus to the web browser and reload/refresh the web page (F5).
5. Continue making edits and switching to the browser to check your results.

Want to make this process even easier?

In this tutorial on setting the text editor default in Firefox by SpiceWorks, you can view the page source and edit it in your text editor quickly and easily.

1. Open Firefox and type in about:config into the address bar.
2. Click that you will be careful
3. In the Filter or Search, type view_source.editor. Three items will be in the results.
4. Double click view_source.editor.external.
5. Change the value to TRUE by double clicking it or choosing to edit.
6. Double click view_source.editor.path
7. Change the path to that of your editor. If you are using Notepad++, it would be c:\Program%20Files%20(x86)\Notepad++\notepad++.exe. NOTE: Firefox does not like the spaces in between the letters. Use %20 instead of spaces. It may take some playing around with the link, but it does work.
8. Close Firefox and reload it.

Firefox should now be configured to open the page source in your text editor.

To use this feature, you can copy the HTML or CSS you wish to experiment with and paste it into your web page or a test page, or you can save it to your computer along with the web page to edit and experiment with it there. Or, if it is your own web page, make the appropriate changes and upload it to your server.

Other tutorials on how to do this include:

• View Webpage Source Code in Your Favorite Text Editor – Firefox – How-To Geek
• Tip: Change Default Text Editor in Fx | Firefox Extension Guru’s Blog