Edit an HTML Capture

Article Overview

This article outlines the process for editing browser screens for Skyllful Lessons using the SingleFile Chrome extension and a text editor such as Notepad.

Step-by-Step Tutorial

Open in Notepad.

Right-click the downloaded HTML file → Open with → Notepad.

Open in Chrome.

Right-click the same file again → Open with → Google Chrome.

Find the Element.

In Chrome, click the three dots → More Tools → Developer Tools (or press Ctrl + Shift + I).

Inspect the Page.

Turn on the Element Inspector (cursor icon), then hover over the item you want to edit.

→ The related code will highlight in the Developer pane.

Copy the Code.

Right-click the highlighted code in the Developer pane → Copy → Copy element.

Locate in Notepad.

In Notepad, press Ctrl + F, paste part of that code, and hit Enter to find it.

Edit and Save:

Make your changes, then save the file (Ctrl + S).

Refresh the Chrome window to see your edits.

Return to top.

Demo

Open Browser File in Screen Editor

1. Right-click the downloaded HTML file.

2. Select [Open with] and choose [Notepad].

Identify HTML Code to Be Edited

1. Open a second version of the downloaded HTML file in a Chrome Browser by right clicking the file and selecting [Open with], then [Google Chrome].

2. Access the three dot Chrome Browser Overflow Menu>More Tools>Developer Tools or (CTRL + SHIFT + I).

3. This will open the Developer Pane.

4. Turn on the Element Inspector in the Development Tools.

5. Hover over the element of the webpage of which you want to edit. This will highlight the code in the Development Pane.

6. Right-click the Element in the Development Pane and select Copy Element.

Edit HTML In Text Editor

1. In Notepad, type [CTRL + F] Enter. This will find the element in the HTML Code.

2. In the highlighted code, make the necessary edits.

3. To save changes, type [CTRL + S].

4. Open the saved file in Chrome browser to review changes.

5. Save the updated HTML file to Skyllful Screen Library.

Best Practices & Troubleshooting

Best Practices

Save a Backup First
Always duplicate your downloaded HTML file before editing (Right-click → Copy → Paste).
→ This protects your original file if something breaks.
Load Everything Before Saving
When you capture with SingleFile, scroll through the page and let all images, menus, or pop-ups load first.
→ SingleFile only saves what’s currently visible or loaded.
Use Chrome’s Inspector to Pinpoint Code
Don’t try to guess where something is in the HTML — use Ctrl + Shift + I and hover to find the exact element.
→ It’s faster and avoids breaking the page layout.
Edit Small Sections at a Time
Make one or two edits, save, and check in Chrome before doing more.
→ Large edits can make it hard to see what caused errors.
Keep Notepad Formatting Clean
Avoid pressing Enter or adding extra spaces in long lines of code.
→ HTML structure is sensitive to formatting changes.
Use Ctrl + F Wisely
Copy a unique piece of the element (like a class or ID name) when searching in Notepad.
→ Searching common words like “div” or “span” may show hundreds of matches.
Refresh to See Changes
After saving your edits in Notepad, go back to the open Chrome tab and press Ctrl + R to refresh.
→ You’ll instantly see whether your changes worked.

Troubleshooting

Issue	Possible Cause	Quick Fix
Your edits don’t show up	You’re viewing the old saved version	Close and reopen the file in Chrome after saving.
The layout looks broken	A missing bracket (>, /, or ")	Undo your last change or open your backup file.
You can’t find the right section in Notepad	The code line is too long or repeated	Try searching for a unique class or text snippet inside the element.
Chrome’s Developer Tools looks confusing	Too many panes or tabs open	Click “Elements” at the top of the Developer Tools window. That’s where you need to be.
The file won’t open properly in Notepad	The file is too large for Notepad	Try opening it in Visual Studio Code or Notepad++ (both are free).
You edited text but not visuals	Images and styling are controlled by CSS	Edit only the text between the tags (e.g., <p>your text here</p>).
SingleFile didn’t capture everything	The page loaded content after you clicked save	Reopen the page, wait for everything to appear, and save again.