In Browser layout checking with designMode

Sometimes there is a desire to quickly check how your site layout will look when the text of some block is changed, and it will be great if it will be possible without making any changes to the real data or markup. It turns out all browsers provide such possibility.

All you need to do is to enable the corresponding document mode - Document.designMode. To do this, in the browser console, execute the command document.designMode = "on". After executing this command, all text blocks on the site become editable, and you can change the text of any of them to check how it will look when its contents are changed.

Demo:

Similarly, the command document.body.contentEditable = "true" works.

In General document.designMode and element.contentEditable API used for creating HTML editors in browser.