DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for God Mode in browsers: document.designMode = "on"
Gautam krishna R
Gautam krishna R

Posted on • Updated on

God Mode in browsers: document.designMode = "on"

Just type document.designMode = "on" on you favourite browser's devtools and see the magic.

It will make any website editable:

preview

Top comments (6)

Collapse
 
lukeshiru profile image
Luke Shiru

You can create a bookmarklet to toggle it:

javascript:((d,o,m)=>{d[m]=d[m]!==o?o:"off"})(document,"on","designMode");
Enter fullscreen mode Exit fullscreen mode

You have to put that as the URL of a bookmark you name something like "Toggle Design Mode", and done. Even works on mobile πŸ˜„

Collapse
 
nikoheikkila profile image
Niko HeikkilΓ€

This makes a good office prank when a colleague has forgotten to lock their workspace:

Enable the design mode, replace random strings on a webpage with [object Object], disable the design mode and back away. πŸ‘

Collapse
 
kvanrooyen profile image
Keagan Van Rooyen

That is amazing! I'm going to be doing that when I get back to the office.

Collapse
 
ben profile image
Ben Halpern

This really is just the coolest

Collapse
 
dhruvindev profile image
Dhruvin

is there any way to save the content ?

Collapse
 
gautamkrishnar profile image
Gautam krishna R Author

Click on file > save page as. You will be able to save the page as html.

πŸŒ™ Dark Mode?!

Turn it on in Settings