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?
designMode
You can set document.designMode to 'on' and your page becomes editable. See it in action.
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.
contenteditable
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;Bookmark
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.
(function(){
document.designMode = document.designMode === "off" ? "on" : "off";
})()Then I can just add this code to bookmarks with javascript: inserted before.
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"})()
