Browser Design Mode

Photo: Agnieszka Boeske - Unsplash

A super busy week (for reasons that will become clear in next weeks post) led me to almost not posting this week. But, I was on Twitter tonight and saw a Tweet gaining a lot of attention and I can see why.

That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN

— Tomek Sułkowski (@sulco) September 27, 2019

By executing the following code in the developer tools of your browser (or in a script)

document.designMode = "on"

you can directly edit the content of the web page you are on. Just like a CMS editor. The property defaults to “off”.

This may not seem a massive thing. I can think of many times this would have saved me so much editing via development tools when sat with a user.

The full feature details can be viewed here. I did read in a couple of associated articles that for IE the on/off values for the property need to be capitalised.

The changes you make can not be saved from what I can see and do not show up in the diff tools provided by developer tools. It is still really handy and I will make a lot of use of this.

If you have any great tips for front end development then please contact me via twitter or email.