How to Edit Website on Browser Using JavaScript Code

You can modify any webpage content using this JavaScript on your browser, but the changes are temporary. 

Any changes done to the website using this JavaScript will not affect the website. These changes are temporary. Imagine as if you are copying website content and editing in Microsoft Word or any editor; these changes appear/are seen only to you. 

You can use this trick to fool your friends, family, or colleague using this JavaScript.

Just copy and paste the below JavaScript code into the address bar of your web browser and hit Enter. You may notice that the web page or website will become editable.

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

Besides fooling people, this JavaScript feature comes in handy if you want to print a web page by modifying its content or creating fake screenshots. 

As you can see in the below image, we modified Yahoo’s home page’s content using JavaScript code.

Note: Though the edits are temporary and disappear the moment you reload that page. So no need to worry when using this code, as you are not doing anything illegal here.

UPDATE:

Most web browsers today will not run the JavaScript directly from the address bar. Please follow the below step to run the Javascript on specific browsers.

For Chrome & IE

When you copy and paste the script on Chrome & IE address bar, it will automatically remove the JavaScript name from the script. So simply add the JavaScript name with a colon at the start.

• Copy and Paste the JavaScript code into the address bar
• Now press the Home key; this will take you to the starting point of that code in the address bar.
• Type javascript: (don’t forget to add “:” colon right after “javascript” without any space), now just press Enter to execute.

For Firefox:

Post Firefox 6 updated; Firefox no longer supports running JavaScript on the address bar. The above trick used in Chrome and IE will not work either. You can run the JavaScript directly using Bookmarklet or Firefox Scratchpad. Bookmark is easy and straightforward, just add the code in your bookmark and run the bookmark.

• Right-click on the Firefox toolbar and choose New Bookmark. Add the above code manually in the location box of the bookmark and give any name for the bookmark as you wish.

or

• Add Edit Website – Drag this link to your bookmarks toolbar.
• Once this is added to the bookmark toolbar, go to any web page and just click the edit website bookmark on the toolbar, and you should now be able to edit the webpage.

Alternatively, you can use the Firefox console; Press Ctrl + Alt + K, paste the code, and press Enter.