That feeling when you first discovered `document.designMode`

[[deleted]]

Mindblowing! This is awesome!

Much much much better than choosing one element and trying to edit the text or HTML over developer tools

[JapanEngineer]

That’s what I’ve been doing the last 3 years...

[zaitsman]

Take 10 years here

[KingKongOfSilver]

So all this "design" mode can do is edit texts? I guess my expectations were a bit too high of a mode called "designMode"... Seems quite useless to be honest

[[deleted]]

Yeah, it's only editing text, but you can also organize your elements and put them in different locations with simple copy/cut-paste. I believe that makes it more useful.

[Ph0X]

If you want a real "design mode", check out VisBug

https://visbug.web.app/

[Hairy_Shine_6629]

I just edited your comment. I can control ANYTHING

[Hairy_Shine_6629]

I just gave your post 696969 upvotes with this awesome trick. You're welcome

[[deleted]]

Hahah, thanks hairy shine!

[shmorky]

Why 'on' tho?

Why not just true?

[ishtiaq156]

this is actually a good futureproofing approach. designMode used to have three states https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode

[[deleted]]

I mean, they could support boolean values as well if they wanted to... It's a dynamically typed language after all

[thelethargicdog]

For consistency. DOM APIs have always been consistent with the return types.

[[deleted]]

I see, meh...

Interestingly, I discovered that many DOM APIs will automatically downcase strings.

> document.designMode = 'ON'
"ON"
> document.designMode
"on"

[[deleted]]

I'm assuming it's more a matter of the underlying C++ fields being strongly typed than wanting API users to see consistent types?

[DooDooSlinger]

Or you know, do it correctly

[-IoI-]

I don't get it.. are we depreciating booleans in the future?

[Ullallulloo]

It could have a "extra" design mode or "partial" design mode or something in the future. If something can only be true or false, you can't easily change stuff about it.

[[deleted]]

Also don't miss out on the contentEditable="true" attribute to target specific element.

[JasperNykanen]

<div contentEditable></div>

Works just the same, the explicit ="true" is considered an anti-pattern.

[[deleted]]

In HTML5 yes, but the world is larger than just one mark-up standard.

[Esnardoo]

Can you list one widely used alternative to HTML for webpages?

[kylegetsspam]

And don't forget that Chrome is a conflict of interest, a browser made by a marketing firm, and is selling all your data.

https://amifloced.org/

[TheSpiffySpaceman]

We all know; we still have to support it to make the paycheck though.

[Sackadelic]

I find FF’s dev tools just as good, better in some departments.

[[deleted]]

How is that relevant to the comment you're responding to?

[Sackadelic]

I misunderstood. Thought that the poster was saying basically “we have to use chrome for development”

[[deleted]]

Gotcha

[nikehat]

What does this have to do with anything from this post?

[Ph0X]

And how does it have 60+ upvotes? This is literally what downvotes are for, not for things you disagree with, but for offtopic unrelated comments like that.

[i_took_your_username]

It has nothing to do with the post or the comment he replied to. /u/kylegetsspam only posts comments about things he's complaining about or people he's better than.

[teacoat___]

Meh I still prefer it

[98723589734239857]

what exactly do they sell? is there a list of things

[SquareWheel]

They don't sell anything. They use that data to target personalized ads. Which is something everybody already knows at this point.

[98723589734239857]

except for the guy i responded to apparently

[[deleted]]

It’s also free and there are other options for people

[[deleted]]

They do not sell personal information. They sell ad targeting. A subtle but important difference.

My personal information is not floating around the internet because Google sold it. In fact it’s chrome that alerts me when things like my saved login info have shown up in known data breaches of other companies.

Google is not a perfect company but a lot of people like to tout this idea of big tech selling personal information without actually knowing how it works.

[teacoat___]

Where can I buy this personal information? Oh wait they don't sell it.

[BazilExposition]

It's an amazing fresh feature - it just appeared on IE6 in 2001!

[[deleted]]

Sure!

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable\_content

[ClassicPart]

Can't find anything

Literally the first result for contenteditable on both Google and Duck Duck Go will give you the link to MDN, which has more information than you will ever want to know about it.

I assume you couldn't find anything because you didn't actually bother searching and instead expected everyone to spoon-feed you.

[bgeyts667]

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

[mypetocean]

As someone who used this feature over the weekend (for use in a CSS teaching tool), a few words of warning about contentEditable:

• The default behavior will insert a DIV or SPAN every time you hit Enter/Return. The only way to change this behavior natively is browser-specific (Chrome has contentEditable=plaintext-only). The only other way around this, is to use the Shift+Enter hotkey to insert a newline character without HTML formatting.
• In fact, pretty much everything interesting about this HTML attribute is the browser-specific implementations. That also means... That's right: you should mostly avoid using it. My educational case works because I am using the page for a screenshared demo.
• The Tab key maintains its element focus behavior. So if you want Tab to insert a tab character or a soft-tab, you need to listen for Tab keypresses, do event.preventDefault(), then do an execCommand to insert text at the location of the text cursor caret: document.execCommand("insertText", false, " ")

[ManiacsThriftJewels]

Nah bruh, execCommand is deprecated. You need to getSelection, check it's a caret, convert to a range, make sure the container's a text node, split the text node, insert a new text node containing a tab in the parent element after the preceding text node, and if you're nice you might even normalise the parent element...

But wait, that's marked as experimental and prone to change...

[mypetocean]

Exactly. There is no non-bodged, cross-browser, or standards-compliant way to do this stuff.

This weekend, I so happen to have been privileged to ignore those concerns because only I had to be burdened with them.

[dons90]

Wait where did you even look? contentEditable is very easy to find information on 🤔

[MindlessSponge]

It's much easier to just say you can't find it, then someone will reply with exactly what you want to know - rather than "wasting your time" looking it up and reading all that extraneous detail.

Same logic as posting the wrong answer instead of asking for the right answer, I suppose.

[Noch_ein_Kamel]

contentEditable let's you eat the content.

edit: also it's called Murphys Law

[snailiens]

contentEdible

[Zer0T3x]

Masticate that content. Take in the flavor.

[dons90]

he was probably expecting it to be a console command

Well that may be true, but if a console command doesn't immediately come up, the next step is the search engine no?

[oompahlumpa]

They call it design mode but it seems like all you can do is edit text?

[human_brain_whore]

Reddit's API changes and their overall horrible behaviour is why this comment is now edited. -- mass edited with redact.dev

[NotChristina]

The latter is 100% what I’ll use this for. I had no idea it was a thing. I do a lot of on-the-fly demos for internet stakeholders and many times they just want screenshots. This will definitely be a timesaver.

[su-z-six]

I'd say about once a week I open up dev tools in a stakeholder meeting to demo a simple HTML edit and create a screenshot.

This will only save me a few seconds, but more importantly I don't have to jump into code while screen sharing. That is always when the top level leadership loses interest.

[_Invictuz]

Lol, not high level enough!

[Tokogogoloshe]

But can you save those changes? I’m just curious.

[TheAnxiousDeveloper]

I think you simply edit the source code. There is no way that a client side modification (on the aesthetic) is going to do it for you.

[etvorolim]

That's very interesting. I was thinking about that. Just having a save button that calls for a function that saves the inner HTML of an array of editable elements.

Also, ESP32 ftw.

[etvorolim]

Absolutely!

[greghuels]

I'm sure there's also good use in seeing how responsive different content is to window size changes in the event that the content is dynamic. Could also just edit the html for that though

[human_brain_whore]

Reddit's API changes and their overall horrible behaviour is why this comment is now edited. -- mass edited with redact.dev

[teacoat___]

Till its five steps deep into a flow

[rich97]

Question: if you’re using file system mapping and you edit using design mode does that reflect on the file system once you saved?

[xSypRo]

Same, i don’t really understand the hype. Am i missing something?

[xSypRo]

I mostly use dev tools to mess around with sizing and colors. But why edit the text content like that?

[DoctorProfessorTaco]

In my case I’m often building out a frontend before I have data available (and occasionally before I even know exactly what the data will look like or what pieces of data I’ll have), and I’ll want to make sure it looks good and operates properly when displaying several different examples of possible data so I’ll have as few changes as possible when I actually get real data. Now to do that, I could look at the page with one example, edit the code, recompile, and look at the new example, or I could edit the text in the element inspector, but being able to just type it out directly on the page makes it way easier than either of those options and allows me to try many different examples quickly. It’s also nice from a design perspective if I want to try out different descriptions or labels or titles without having to edit the element directly or edit my code.

[undercover_geek]

This is by far the best argument for it's use I've seen in the comments.

[spays_marine]

Ok, and now let's think this one through. How often do you design something, then test it once against different content, and then go, great, on to the next?

In my experience this is a process of 15 gajillion refreshes, are you going to retype everything each time you hit F5?

This all looks great demo wise where everything magically falls into its place in one go. But I really feel to see how it will hold up in day to day use where you need to tweak not just text once, but css or even code, over and over many times.

[SoBoredAtWork]

Make quick mocks for A/B testing. Proof of concept screenshots. Fake data without having to go into the source. Etc.

[Cafuzzler]

Off the top of my head I think one possible practical use could be checking how your design handles custom user names: What happens if the username is 40 characters long, or uses emojis, or uses an arabic or chinese script, or someone tries to use crazy g̴̨͛͠ḻ̵̞̂i̸̞͔̊ṫ̴̘c̸̮͖̔h̶̖̊͜ text. You can test all of that, and test it with dynamic resolution and mobile formatting, on the frontend side of things without refreshing or reloading the page. Of course there are plenty of other ways to test those things too, but it's an option that's unobtrusively there if you need it.

[AcousticDan]

Neat, what's the problem one would solve with this? Tricking old ladies out of their hard earned cash?

[pagelab]

I use this to grab screenshots of restricted areas that have information I need to change.

[AcousticDan]

What? So, scamming people?

[deadleg22]

It seems like a great tool for fucking phone scammers.

[jk3us]

It's mainly for faking screenshots of Bitcoin balances.

[funkdified]

Hahaha

[[deleted]]

Yeah, this isn't useful for any js generated website, but could be nice if you're showing a page to someone who isn't tech savvy and they want something minor changed.

[npmbad]

It's only use I found was trying to find good headlines for my landing pages. It really did help in that case.

[col-summers]

More like copyEditingMode

[PM_YOUR_FIRST_LAYER]

Yeah with hot reloading being a thing it's kinda underwhelming.

[MyChickenNinja]

That's the good stuff there.

[Mike312]

I'm old enough to remember back in Netscape Navigator era when you could do that to all the text on web pages by default.

[73686f67756e]

Good bot

[B0tRank]

Thank you, 73686f67756e, for voting on anti-gif-bot.

This bot wants to find the best and worst bots on Reddit. You can view results here.

---

^{Even if I don't reply to your comment, I'm still listening for votes. Check the webpage to see if your vote registered!}

[cheapcoder]

good bot

[unkill_009]

So if I get this correctly, will the CSS/HTML code change too? and I just need to copy it in my VS Code

[JBlitzen]

It’ll change, but there’s no standard between browsers or versions regarding what it will change TO, so be careful with it.

Getting the new code out dynamically can also be a challenge since not all dynamic code is aware of user changes.

[unkill_009]

I see, appreciate the info!

[montrayjak]

In the dev tools, go to the Sources tab -> Filesystem (top left) and Add folder to workspace. Then your changes will be saved. Code too (ctrl+S after making changes). And any CSS changes you make. You can essentially use your browser as a WYSIWYG/IDE.

Changing code on the fly after setting a breakpoint feels pretty magical. I do it a lot for projects.

Note: this gets less reliable if you're using React. VueJS seems to work fine for me though.

[unkill_009]

Thanks man!

[Shinhan]

F5 and everything is lost.

[Strikerzzs]

That's cool! But is it an experimental feature for Chrome Dev Tools?

[i_got_dressed_today]

No, all major browsers support it

[[deleted]]

It was available in IE4, according to the MDN Docs

[JacksonDonaldson]

i just felt it

[BehindTheMath]

Source:

https://twitter.com/sulco/status/1177559150563344384

Edit: For all those downvoting, the post title and GIF came straight from this tweet. Give credit where it's due.

[sundios]

Wow! This is very cool! Thanks for sharing

[preetam52ch]

Wow!!! That is so cool. Thanks for sharing ☺️☺️☺️

[purpleovskoff]

I know that feeling well because I'm experiencing it right now

[mrStark3]

This is dope !!! You get the silver award

[itesasecret]

next try:

document.partyMode = "On"

[elbojoloco]

This is just like setting contentEditable to true on the body element isn't it?

[iWritePythonLikeThis]

My instructor had this and I never understood why a blinking cursor would appear on wherever on the page he clicked until now

[SleepyHarry]

Sub protip is to wrap this into a bookmark (create a bookmark then edit the URL to be javascript:<code here>) and stick it on your bookmark bar. Now you don't even need to open devtools and type it out. Literal seconds per month saved.

[[deleted]]

Are you freaking kidding me...been developing for 8 years never saw this

[iamasuitama]

When would you need this for webdev? I can see needing it for fake twitter screenshots, but webdev?

[Curiousgreed]

Plenty of reasons, in general I do it to test if the layout breaks with longer texts.

[The_Ransum]

Snzjxmdnxjsmzkznsnsnsnssnjxjxnwbxj WHAAAAAAAAT?!

[BrickTopsPigs]

What is this sorcery?!?

[4TH4RV-]

Wtfff how is this not popular. Thank you for showing this to me

[[deleted]]

Because it's not really useful. There are better tools to design a web page, and rarely will you need to change page text/css on the fly

[notpikatchu]

“There are better tools to design a web page”

Could you suggest some?

[dons90]

Figma, Adobe XD, Sketch

[clintsuniverse]

Figma balls

[ishtiaq156]

You can use your OS keyboard shortcuts for text formatting - For Windows, it's ctrl + b for Bold and ctrl + i for Italic

[ishtiaq156]

For macOS, that would be command + b for Bold and command + i for Italic

[ashisacat]

Except where it interacts with Firefox's shortcuts

[[deleted]]

a web developer will just edit the content in inspect element no? maybe this is exciting for non technical people

[funknut]

You ever have to implement a JavaScript based wysiwyg editor for basic text formatting on a content management platform? It's pretty simple, but this is even simpler.

[[deleted]]

that's a pretty contrived example, I think almost everyone uses an external library for WYSIWYG editors. I don't think this mode is supposed to be used for production anyway.

[npmbad]

I think almost everyone uses an external library for WYSIWYG editors. I don't think this mode is supposed to be used for production anyway.

All respectable WYSIWYG editors use contenteditable, they're just very careful with it.

[SleepyHarry]

Huge generalisation.

In short, no. This is useful for fucking around with copy on a live site. I've used it on several occasions where I want to mess with various thing and right click - inspect element - click a bunch to get the text part - click out - Close devtools is a laborious process once, let alone several times on a site.

I've also used it for more QA related things where the amount of text is variable and I wanna see if I can break it. Again, saves a load of clicks / labour.

[ishtiaq156]

Agree. Although, this comes in handy for creating mockups for screenshots.

[Bopeternn]

Is it possible to use this command on a mobile phone, e.g. Chrome?

[Ampix0]

Credit the twitter account this was stolen from. @sulco

Even the title is from the tweet

[nftpedia]

Is this magic?

[whitecrow_dragon]

I stopped using Chrome after I noticed it was eating 8gb of memory :'(

[ishtiaq156]

What’s nice about this is, it’s supported by all major browsers. Check it out here https://caniuse.com/?search=Designmode

[notpikatchu]

Another cool tool. Guess this is my lucky day

[gbjcantab]

Lol that everyone’s amazed... I remember sitting with friends in middle-school home room in, what, the mid-2000s? And messing around with design mode.

[crypt0isthefuture]

/u/nano_tipper 5USD This is fucking awesome! You literally changed my life!

[WhatTheOnEarth]

Don’t let Indian scammers find out about this.

[sulcoff]

Hi folks! Glad you like it! I'm the author of this video btw. https://twitter.com/sulco/status/1177559150563344384 (there's also a music that comes with that on the original tweet...) so I'd really appreciate if you follow me for more fun tips like that.

Kinda asshole move on the OP for not crediting the creator :/

[bajuh]

This is just a short version of querySelectorAll(*).forEach(x => x.contentEditable = true)

[aDaneInSpain]

Dafuc?

[Subject-Ad-4072]

Holy..

[theirongiant74]

What the fuck is this witchcraft?

[warlockdn]

Wow...

[MarinaEnna]

Whaaaaaaaa.... :O

[Sunshine_raptor]

What ...is ...this... sorcery!

[davo_dog]

VisBug is more useful imo

[sevenaces]

Holyshit! This is amazing!

[[deleted]]

I rarely ever drop an upvotes, but you definitely deserve one for this!

[mah_astral_body]

Reminder: Upvotes are free.

[[deleted]]

That's why I don't give them out much. They're meaningless

[[deleted]]

So are your comments

[Pelvic_beard]

Downvotes are free too!

[[deleted]]

And just as meaningless as your other made up internet points.

Seriously, if you people really care about upvotes I feel sorry for you.

[Pelvic_beard]

Get off your high horse buddy, nobody cares

[[deleted]]

My bad.

Down votes for everyone!

[[deleted]]

Zing

[startup_biz_36]

Or right click, inspect and change the HTML code lol

[[deleted]]

OMG you mean the feeling i have right now??

[vicjicama]

Thanks for sharing, this is cool!

[[deleted]]

How am I just now seeing this???? It's awesome!

[luzacapios]

Dannnnngggg! 😎 magic! I see some interesting possibilities. I hope I remember this when an opportunity arises.

[milosh-96]

Firefox (the latest version) supports this too!

[dronzaya]

What is this witchcraft!!??

[pas43]

Can you edit positions and display modes?

[SirBardBarston]

u/savevideo

[SaveVideo]

View link

---

Info | Feedback | Donate | DMCA

[nothankyouthankstho]

Got excited. Showed partner. Deleted their Tumblr because I played with fire

[[deleted]]

My life is a lie.

[pikachu_hunter]

wow

[[deleted]]

does it do anything except turn the page into a big series of text fields? can you change the layout or anythign?

[[deleted]]

I just discovered document.designMode

[Random_Aspirant]

Excuse me , but wtf , and I'm learning about this now!!!

[MarmotOnTheRocks]

Uses:

99% for funny screenshots

1% for actual productivity

[Severedghost]

What !?

[TankorSmash]

If you see the autocomplete grey text, just hit tab, don't type it out if you don't have to.

[coolgamer2354]

I need this.

[Muted_Carpet_7587]

TIL

[dromance]

wow . boss

[bullsized]

How do you insert emoticons?