Quickly edit the texts on Browser

over 9 years ago from Saneef Ansari, Consultant Designer & Developer

Typing “document.body.contentEditable = true;” into Chrome DevTools makes all of the text on a page editable.

Very handy while prototyping.

11 comments

Zach Reed, over 9 years ago
Very handy. I made this into a Chrome extension here: https://chrome.google.com/webstore/detail/edit-all-the-things/oklbdlpgehkiikdkpemecnbindhkncdj?hl=en-US
Also, I will be putting the code in GitHub here soon: https://github.com/bluetidepro/Edit-ALL-THE-THINGS
4 points
- Zach Reed, over 9 years ago
  Updated the code on GitHub, and on Chrome extensions market. Added a few things, and updated it to v1.1! :D
  0 points
Matt Sisto, over 9 years ago
We need a Pro Tip™ badge.
4 points
- Stefan Hoard, over 9 years ago
  Agreed, I'm kinda surprised that we don't already.
  1 point
Marc Edwards, over 9 years ago
That’s pretty awesome. Thanks.
2 points
Nathan Manousos, over 9 years ago
You can also type this directly into the URL field: javascript:document.body.contentEditable = true;
1 point
Account deleted over 9 years ago (edited over 9 years ago )
It's useful! Thanks.
0 points
Jamie Wilson, over 9 years ago
Dang. Much faster than editing the nodes in the elements tab. Thanks for the tip.
0 points
Lucas Lazaro, over 9 years ago
Pretty handy, added to my collection of snippets!!
0 points
Patrick Ludewig, over 9 years ago (edited over 9 years ago )
Oh, what a nice trick. Thanks! (No, thats no spammy thanks-post, i tried to edit the comment button and accidentally had also content in die textarea)
0 points
Vincent Milliken, over 9 years ago
Wow awesome man! thanks for the tip!
0 points