JavaScript to Edit Web Page Directly

Sam Deering
Tweet

I’ve posted this script on the blog before in a joint post, but as I really do love it i thought it deserved it’s own post. With this awesome script you can edit any web page you want live in the browser. You can change text, move images around, re-align components, whatever you want really. Great for web designers who want to quickly show changes in a web page to a client for example.

JavaScript Edit Web Page Directly

Simply copy and paste this code snippet into the address bar and press enter.

javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void 0

jQuery Visual Event

If you’re interested in quickly seeing what elements on a page have jquery events attached to them then this bookmark script is just for you! Click the button below to test it out!

Visual Event

Instructions

  1. Drag+drop the ‘Visual Events’ bookmark button below onto your toolbar
  2. Visit Web Page
  3. Click Bookmark
  4. Change Underwear

Source: http://www.sprymedia.co.uk/article/Visual+Event

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.echteinfach.tv/ Harlem

    Awesome tool! Best tip of the month. Showing all javascript attached.

    Just tried this on google.com. Found out that their logo has the following js-code:

    1 function onload(event) {
    2 window.lol && lol();
    3 }

    lol?! ;)

  • Bob

    “Javascript edit web page directly” would be a great help to me except when I exit the page after making a change, the change does not appear on the site the next time I go to it. I don’t see a way to register the change.

    What am I missing?
    Thanks,
    Bob