How To edit HTML in Google Chrome and Save it Locally [2026 Guide]

I’m going to teach you how to edit HTML in Google Chrome and save it locally. This is handy if you need to make quick edits or experiment with code changes without altering the live website.

Edit HTML in Google Chrome and Save it Locally [2026 Guide]

Open the page and Developer Tools

Open the page in Chrome. Navigate to the specific web page you wish to edit.

Press F12 to open Developer Tools. Or right-click anywhere on the page and select Inspect. This opens the developer tools panel.

Use the Elements tab

Make sure the Elements tab is selected. It displays the HTML structure of the page and lets you explore and edit the underlying code. Spend a moment familiarizing yourself with the layout.

Find and edit the HTML

Right-click on the html tag at the top of the code section and select Edit as HTML. This allows you to make broad changes to the HTML structure of the page.

To target a specific element, right-click the element you want to modify on the page and choose Inspect. In the Elements tab, locate the desired line of code. Double-click it to edit text or modify its attributes directly.

Copy your changes

After you’ve made the necessary changes to the HTML, save them for future reference or use. Right-click on the html tag again, go to Copy, then select Copy outerHTML. This ensures all your edits are captured accurately.

Paste into a text editor

Open a text editor like Notepad, Notepad++, or Visual Studio Code. Paste the HTML code you copied. It may look different outside of Chrome’s developer tools, but this is your edited HTML.

Save the file locally

Save the file with an .html extension, such as my edited page.html. This ensures it functions correctly when opened as a web page.

Final Thoughts

You’ve successfully edited HTML in Chrome and saved it locally for your use. This process is invaluable for web developers and those learning HTML alike, offering a sandbox to test and iterate safely.