Edit your Live Website using document.designMode
I only just heard about this and to be honest is probably more for fun than any real practical use. However if you’d like to try out different text when you’re in “design mode” this is a quick and easy way to visualise the results.
What is Design Mode?
The Design Mode is a browser specific property that allows you to directly edit a websites text contents.
Depending on browser it can also highlight spelling mistakes. This facility seems to work differently in different setups i.e. currently does not seem to work in Firefox.
How to activate it
By default this property is set in the
off state. To enable, open the developer console for your browser, select the
Console tab and then type the line below.
You can also target an iFrame
In order to do so, follow the steps above adding the line below.
It’s a fun tool to play with, but if anyone has found a really practical usage for it please reach out and let me know.
// End of Article