Edit Browse Content using contentEditable property

If you are developing something and want to edit the content in the browser/ add content in the browser for some testing, normally we search for that content tags by inspecting the element and select the content, then we edit the content in the browser, but there is a good solution to edit the content in the browser itself with out inspecting the tags.

Solution:

follow the below simple steps to do this

1. Open the Browser (Here I used Google Chrome).
2. Press F12 key and you will see "Developer tools" window as below.

Browser Developer Properties


3. Click on console window from developer tools.
4. Use the below line of code in the console and set its property to true.

  document.body.contentEditable=true

5. Now i will show you an example how to do this
 By using the above solution, I've added the "Sign up" text.

to Edit Browser Content Using Developer Tool


Edited Browser Content Using Developer Tool

SHARE

Sudheer Gangumolu

I'm a Software Analyst / Developer / Blogger, having good experience in working with different flavors & Customization of SharePoint (i.e.,SP O365 / 2013 / 2010 / 2007) and .Net Apps. Currently, working on SharePoint 2013 / SharePoint O365. Guiding people on my technologies.

    Blogger Comment
    Facebook Comment

0 comments :

Post a Comment