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

Edit Browse Content using contentEditable property Edit Browse Content using contentEditable property Reviewed by Sudheer Gangumolu on October 24, 2015 Rating: 5

2 comments:

  1. First You got a great blog .I will be interested in more similar topics. i see you got really very useful topics, i will be always checking your blog thanks. https://www.valsqld.com.au/

    ReplyDelete
  2. These charges would normally stem from the local council and their rating processes. It could be that special charges have been raised on the property as a Special Levy for the precinct.real estate practice test

    ReplyDelete