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
'on' and your page becomes editable. See it in action.
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
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
Full bookmark snippet is