Browser Design Mode27 September 2019
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)
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.