This post is especially helpful for QA and designers (at least I hope it is) .

Right now, if you want to test how a particular text looks on a webpage, or if you want to see how an element behaves if the content in it is shortened/lengthened , you have to go to the browser’s developer tools,  and change the content of that element in the markup  to see how it looks.

Well, you don’t have to do any of that anymore.

We have written a small chrome extension which takes care of all of that.

With the help of “Edit away”, you can click on any element on the webpage, and modify or add to it’s text, right there.

As I mentioned, this can be especially helpful for testers testing different scenarios with larger/shorter texts and related stuff without actually having to worry about data setup.

You can add this extension to your chrome browsers from here

It’s dead simple to use. Just click on the pencil icon to activate it. Start editing the content of the page. Once done, click again to deactivate it. Refresh the page to reset the changes you’ve made.

Note – It gets deactivated by itself if you move to a different tab. So you’ll need to activate it again once you come back to the tab you were working on.

What’s going on behind the scenes here is pretty simple actually.

HTML 5 has introduced a property called designMode. When designMode is enabled, it allows the editable elements of the webpage to be edited by the user right on the page itself. It basically turns your browser into a basic HTML editor.

You can switch it on yourself if you want. Just go to the console, type document.designMode="on"  and voila! Of course, you don’t need to do any of this now. Just use the extension 🙂