|

Make whole web pages editable with document.designMode

Who hasn't done this in the early years of their web developer career: open DevTools, pick any headline and then change the text. A lot of fun! This is how "Google search" quickly becomes a "Google plague" and article previews on news sites get abstruse subtitles.
But also in the frontend this method is often used. If you just want to test what happens when the text of a content element changes without having to touch the CMS, a DOM node is quickly changed.

But there is a much better way to do it. Just open the developer tools of the browser of your choice, switch to r console and execute the following line:

document.designMode = "on"

After that you can close the developer tools and let your creativity run free. From now on all texts on the website are editable. In Chrome and Firefox you can even undo changes step by step with CTRL+Z and ⌘+Z respectively.
But be careful when deleting, you can also remove DOM nodes with this method.

After a reload the whole spook is over and you can use the page normally again.