Skip to content

Instantly share code, notes, and snippets.

@panphora
Last active May 22, 2020 21:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save panphora/ea51abac334a3a9cc8ecb33dfd44ce39 to your computer and use it in GitHub Desktop.
Save panphora/ea51abac334a3a9cc8ecb33dfd44ce39 to your computer and use it in GitHub Desktop.

Editing a Web Page Quickly So You Can Gather Feedback

So, you want to edit a web page, change the copy, and save the results -- all without triggering any page reloads.

Video tutorial: https://share.getcloudapp.com/bLuenjZK

1. Open your Developer Tools

Right click on the web page, select the "Inspect" option, and switch to the "Console" tab.

This works the same in every browser -- it's built in!

2. Paste the following code into the Console and press Enter

document.designMode="on"

This will make the entire page editable. But wait, you're not done yet!

3. Paste a little more code into the Console and press Enter

document.body.innerHTML = document.body.innerHTML

This will ensure that no matter where you click on the page, it won't refresh or travel to a new link! (Normally, this isn't a problem, but there are some cases when it matters)

4. Use a full page screenshot tool to capture your changes!

I'd recommend the Full Page Screen Capture Chrome Extension. Click its icon and it just works!

Bonus Tip

Instead of screenshotting the page, why not save it as an HTML file? Then you can edit it later using the same method above!

If this sounds like something you'd want to do, use the excellent SingleFile Chrome Extension!

Super BONUS Tip!

If you don't want to paste code into the Console because it's too weird/cumbersome, there's a Chrome Extension that will let you edit your page with some great design tools -- it feels just like you're editing a SquareSpace website.

Just use the free VisBug Chrome Extension. Clicking it will make your page editable!

--

Success!

Now you can edit pages and save your changes to show to the rest of your team!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment