6 Useful Bookmarklets to Boost Web Development | CSS-Tricks - CSS-Tricks

Metadata

• Author: [[]]
• Full Title: 6 Useful Bookmarklets to Boost Web Development | CSS-Tricks - CSS-Tricks
• URL: https://css-tricks.com/web-development-bookmarklets/?cmdid=AGOJGTIE03OG8H#activating-design-mode

Highlights

JavaScript has a mightily simple feature that can render an entire HTML document editable. It works exactly like HTML’s contenteditable=“true” name-value attribute (or contentEditable=“true” in JavaScript) but for the whole document. If you’d like to see how it works, start by entering the browser’s console using the relevant keyboard shortcut: Chrome: Option + ⌘ + J / Shift + CTRL + J Firefox: Option + ⌘ + K / Shift + CTRL + K Safari: Option + ⌘ + C / Shift + CTRL + C Next, type document.designMode=“on” into the console, hit Return, and then click on any text element. You’ll see that this text element (and all other text elements) are now editable simply by clicking on them. Browser Design Mode