Edit any web page in a browser
It's possible to use any browser like an HTML editor.
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:
- Check the appearence with a very long title, on the contrary a very short article. We can verify the "resistance" of our design to the text modification.
- Edit a title or a column to see if it's more visually attractive.
- Even move or resize images.
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.

~
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!

Did this article help you?




Tuesday 10 February 2009 at 20:54
This is a nice demonstration that anything transported over the network can be considered out of date as soon as it leaves the source.
Tuesday 10 February 2009 at 22:33Wednesday 11 February 2009 at 2:19
When I do this in firefox, I can save the modified page.
Wednesday 11 February 2009 at 7:26For 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.
Wednesday 11 February 2009 at 9:06Thanks! Good tip!
Wednesday 11 February 2009 at 10:16bls, 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.
Wednesday 11 February 2009 at 11:47I tried this technique on IE and it works like a charm
And I was also able to save it. Really cool tip David, thanks!
Wednesday 11 November 2009 at 8:39Wow! Never thought it was possible using any browser! I should give this one a try! Thanks mate.
Friday 1 January 2010 at 20:28Can it be done in IE 8 also? Will I get any error with this process?
Tuesday 9 February 2010 at 10:32great information.i tried and works gud.thanks for the informative post.very useful.
Monday 19 April 2010 at 8:43i think there are some other softwares also, where we can edit some changes and view the changes before saving the doc.
Wednesday 21 April 2010 at 7:13Nice post...! lets i want to check this first
Tuesday 4 May 2010 at 9:53Good code! I have ever tried in this way.
Thursday 6 May 2010 at 10:20Nice post to read for my kids in class
Wednesday 19 May 2010 at 4:47Thanks 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.
Thursday 3 June 2010 at 18:08hey, just finished reading, awesome stuff! thanks for sharing do you offer some kind of email subscription so i can get more of your content
Sunday 6 June 2010 at 5:27Impressive demo, it's all about convenience!
Saturday 3 July 2010 at 10:50Next you're gonna have to teach us how to make a pizza in a browser.
Monday 5 July 2010 at 11:40