Using a browser as WYSIWYG

Sometimes I need to take a screenshot of a page with some text changed. Of course, I can do it with DevTools. Just need to open DevTools, select the DOM-element with the text, right-click, “Edit as HTML”, make my changes, profit! But is there any simpler way?


You can set document.designMode to 'on' and your page becomes editable. See it in action.

Type document.designMode = 'on' in DevTools Console and you can start editing the page content like in MS Word.

If you need to add an extra line break, use Shift Enter for that.

designMode on MDN


There is another option to enable editing of the page. You can add the attribute contenteditable to a DOM-element. If you add it to the <body> the whole page is editable. Or you can add it using JavaScript.

document.documentElement.contentEditable = true;

contenteditable on MDN


It’s not really effective to make the changes above via console every time. So I use bookmarks for these purposes.

I need something like a toggle.

    document.designMode = document.designMode === "off" ? "on" : "off";

Then I can just add this code to bookmarks with javascript: inserted before.

Adding bookmark to Chrome Bookmarks

Chrome: Bookmarks > Bookmarks Manager > Add new bookmark

Firefox: Bookmarks > Show all bookmarks > New bookmark...

Full bookmark snippet is javascript:(function(){document.designMode=document.designMode==="off"?"on":"off"})()

Webmentions [?]

  1. Чтобы редактировать текст в браузере, не обязательно использовать input или textarea. Для создания превьюшек для постов в «Веб-стандартах» пользуюсь designMode, а ещё можно contenteditable на документ вешать.