Design Mode — JavaScript

As a UX person when you suggest a few quick updates to your website and let your developers know about these changes one thing you can be 100% sure of is that developers will ask you for the mockups, not because they are trying to be painful but they just want to avoid rework.

If the UX team is open to learn a simple javascript command which can be run on the browser's developer console, JavaScript provides a very easy way to fix this problem for minor UI text changes.

Open your website and go to the browser‘s developer console and type

document.designMode = "on"

Now go to your website and you will be able to change any text on the fly, just click on the text you wish to change and start making changes.

Once changes are done you can take the screenshots, and use them as mockups.

You can also use this trick to check how your component will behave if the string you are expecting is too small or too large.

please note that

• by default designMode is off .
• In some cases, backspace will not work, if you want to undo the changes you just need to refresh your page.

Here is a quick Demo

if you are interested in a number separators in javascript, check out my following blog.