Monday 9 Feb 2009

Edit any web page in a browser

HTMLIt's possible to use any browser like an HTML editor. :-o

Of course, the page is not really modified, just refresh it to recover the original. But it allows you to easily makes some tests on any web site:

All that of course just to see, because there is no way to get the modified HTML code.

~

To do this, just paste this in your address bar:

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

For your convenience, you can create a new bookmark with this line as address. By assigning a keyword (Opera, Firefox) you could find it in 2 keystrokes. :-)

~

This small magic Javascript code tells the browser that the entire page is editable. As if it's a text field on a form. So the browser allows you to type anything you want. And because it's HTML, you can also copy the images.

Depending on the browser, you can even see the anchors to resize images.

modify-web

~

Some clever guys would probably also find applications to make jokes or fake screenshots (change the 1st result in an search-engine on a very competitive term, change their number of visits ...). ;-) However, remember to remove the cursor from the end of the line, before taking the screenshot!


cafĂ© Did this article help you? 
Buy me a coffee!
  

19 answers at “Edit any web page in a browser”

  1. Backlink from Edit (kinda) any webpage in browser « Cory M. Gibbons - Code Blog
  2. 1
    Peter (peter.jansson.net) said:

    This is a nice demonstration that anything transported over the network can be considered out of date as soon as it leaves the source.

  3. Backlink from Edit any web page in a browser - HTML & CSS - Azure Dev
  4. 2
    bls said:

    When I do this in firefox, I can save the modified page.

  5. 3
    Anselm Bradford (anselmbradford.com) said:

    For quick textual and image edits, this is a great little JS snippet. For more in-depth live preview editing, I would note that FireBug can do this to the source of a webpage, offering much more that can be directly manipulated, such as the CSS (blog.anselmbradford.com/ ... plug-ins-for-css-development/). However, FireBug is for FireFox only.

  6. 4
    dron01 said:

    Thanks! Good tip! :)

  7. 5
    David (azure-dev.kiao.net) said:

    bls, when I save, I still get the original page on FF. :-|

    Anselm Bradford, of course, there are also the plugin Web Developper and DragonFly in Opera. More powerful, but more complicated.

  8. 6
    Inpatient Heroin Detox Center said:

    I tried this technique on IE and it works like a charm :) And I was also able to save it. Really cool tip David, thanks!

  9. 7
    Animal jewelry said:

    Wow! Never thought it was possible using any browser! I should give this one a try! Thanks mate.

  10. 8
    traffic school online california said:

    Can it be done in IE 8 also? Will I get any error with this process?

  11. 9
    Learners Permit said:

    great information.i tried and works gud.thanks for the informative post.very useful.

  12. 10
    Texas Defensive Driving Online Course said:

    i think there are some other softwares also, where we can edit some changes and view the changes before saving the doc.

  13. 11
    Traffic School Online Florida said:

    Nice post...! lets i want to check this first

  14. 12
    DMV Practice Tests said:

    Good code! I have ever tried in this way.

  15. 13
    Traffic School said:

    Nice post to read for my kids in class

  16. 14
    Cheap Pizza said:

    Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog.

  17. 15
    Compare Web Hosts said:

    hey, just finished reading, awesome stuff! thanks for sharing do you offer some kind of email subscription so i can get more of your content

  18. 16
    Rufus (studentdebtconsolidation.com.au) said:

    Impressive demo, it's all about convenience!

  19. 17
    Noosa Accommodation said:

    Next you're gonna have to teach us how to make a pizza in a browser.

Leave a comment (all comments are moderated, don't waste time with spam)

Version mobile

I follow

© Azure Dev Computer news & PHP tutorials Theme from Greenline + PHP HTML

ThemeWordpress
Azure Dev