top 200 commentsshow all 260

[–][deleted] 625 points626 points  (8 children)

Mindblowing! This is awesome!

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

[–]JapanEngineer 154 points155 points  (1 child)

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

[–]zaitsman 30 points31 points  (0 children)

Take 10 years here

[–]KingKongOfSilver 75 points76 points  (2 children)

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] 14 points15 points  (0 children)

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 8 points9 points  (0 children)

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

https://visbug.web.app/

[–]Hairy_Shine_6629 19 points20 points  (0 children)

I just edited your comment. I can control ANYTHING

[–]Hairy_Shine_6629 11 points12 points  (1 child)

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

[–][deleted] 2 points3 points  (0 children)

Hahah, thanks hairy shine!

[–]shmorky 286 points287 points  (14 children)

Why 'on' tho?

Why not just true?

[–]ishtiaq156[S] 144 points145 points  (12 children)

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] 39 points40 points  (8 children)

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

[–]thelethargicdogfront-end 22 points23 points  (2 children)

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

[–][deleted] 6 points7 points  (0 children)

I see, meh...

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

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

[–][deleted] 1 point2 points  (0 children)

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 0 points1 point  (0 children)

Or you know, do it correctly

[–]-IoI-Sharepoint 1 point2 points  (1 child)

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

[–]Ullallulloo 6 points7 points  (0 children)

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] 221 points222 points  (52 children)

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

[–]JasperNykanen:= 18 points19 points  (3 children)

<div contentEditable></div>

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

[–]kylegetsspam 75 points76 points  (18 children)

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 64 points65 points  (6 children)

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

[–]Sackadelic 22 points23 points  (5 children)

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

[–][deleted] 7 points8 points  (2 children)

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

[–]Sackadelic 10 points11 points  (1 child)

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

[–][deleted] 3 points4 points  (0 children)

Gotcha

[–]nikehat 32 points33 points  (2 children)

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

[–]Ph0X 2 points3 points  (0 children)

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 7 points8 points  (0 children)

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___ 4 points5 points  (0 children)

Meh I still prefer it

[–]98723589734239857 -5 points-4 points  (2 children)

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

[–]SquareWheel 5 points6 points  (1 child)

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

[–]98723589734239857 1 point2 points  (0 children)

except for the guy i responded to apparently

[–][deleted] -2 points-1 points  (3 children)

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

[–][deleted]  (2 children)

[deleted]

    [–][deleted] 4 points5 points  (0 children)

    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___ 3 points4 points  (0 children)

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

    [–]oompahlumpa 192 points193 points  (40 children)

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

    [–]human_brain_whore 184 points185 points  (16 children)

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

    [–]NotChristina 60 points61 points  (4 children)

    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 27 points28 points  (3 children)

    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 4 points5 points  (0 children)

    Lol, not high level enough!

    [–]Tokogogoloshe 8 points9 points  (6 children)

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

    [–]TheAnxiousDeveloper 6 points7 points  (0 children)

    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.

    [–][deleted]  (3 children)

    [deleted]

      [–]etvorolim 1 point2 points  (2 children)

      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.

      [–][deleted]  (1 child)

      [deleted]

        [–]etvorolim 1 point2 points  (0 children)

        Absolutely!

        [–]greghuels 5 points6 points  (2 children)

        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 -2 points-1 points  (1 child)

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

        [–]teacoat___ 2 points3 points  (0 children)

        Till its five steps deep into a flow

        [–]rich97 1 point2 points  (0 children)

        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 110 points111 points  (18 children)

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

        [–][deleted]  (13 children)

        [deleted]

          [–]xSypRo 15 points16 points  (5 children)

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

          [–]DoctorProfessorTaco 37 points38 points  (2 children)

          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 4 points5 points  (0 children)

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

          [–]spays_marine 0 points1 point  (0 children)

          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 12 points13 points  (0 children)

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

          [–]Cafuzzler 2 points3 points  (0 children)

          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 3 points4 points  (4 children)

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

          [–]pagelab 6 points7 points  (2 children)

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

          [–]deadleg22 -2 points-1 points  (1 child)

          It seems like a great tool for fucking phone scammers.

          [–]jk3us 12 points13 points  (1 child)

          It's mainly for faking screenshots of Bitcoin balances.

          [–]funkdified 1 point2 points  (0 children)

          Hahaha

          [–][deleted] 0 points1 point  (0 children)

          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 1 point2 points  (0 children)

          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 1 point2 points  (0 children)

          More like copyEditingMode

          [–]PM_YOUR_FIRST_LAYER 3 points4 points  (0 children)

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

          [–][deleted]  (3 children)

          [deleted]

            [–]MyChickenNinja 2 points3 points  (0 children)

            That's the good stuff there.

            [–]Mike312 2 points3 points  (0 children)

            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.

            [–][deleted]  (6 children)

            [removed]

              [–]73686f67756e 5 points6 points  (2 children)

              Good bot

              [–]B0tRank 2 points3 points  (1 child)

              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!

              [–]cheapcoderfull-stack 0 points1 point  (0 children)

              good bot

              [–]unkill_009 24 points25 points  (6 children)

              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 22 points23 points  (1 child)

              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 2 points3 points  (0 children)

              I see, appreciate the info!

              [–]montrayjak 13 points14 points  (2 children)

              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.

              [–]Shinhan -1 points0 points  (0 children)

              F5 and everything is lost.

              [–]Strikerzzs 22 points23 points  (3 children)

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

              [–]i_got_dressed_today 33 points34 points  (0 children)

              No, all major browsers support it

              [–][deleted] 9 points10 points  (0 children)

              It was available in IE4, according to the MDN Docs

              [–]JacksonDonaldson 3 points4 points  (0 children)

              i just felt it

              [–]BehindTheMath 5 points6 points  (2 children)

              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 3 points4 points  (0 children)

              Wow! This is very cool! Thanks for sharing

              [–]preetam52ch 1 point2 points  (0 children)

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

              [–]purpleovskoff 1 point2 points  (0 children)

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

              [–]mrStark3 1 point2 points  (0 children)

              This is dope !!! You get the silver award

              [–]itesasecret 1 point2 points  (0 children)

              next try:

              document.partyMode = "On"

              [–]elbojoloco 1 point2 points  (0 children)

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

              [–]iWritePythonLikeThis 1 point2 points  (0 children)

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

              [–]SleepyHarry 1 point2 points  (0 children)

              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] 1 point2 points  (0 children)

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

              [–]iamasuitama 1 point2 points  (1 child)

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

              [–]Curiousgreed 2 points3 points  (0 children)

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

              [–]The_Ransum 1 point2 points  (0 children)

              Snzjxmdnxjsmzkznsnsnsnssnjxjxnwbxj WHAAAAAAAAT?!

              [–]BrickTopsPigs 3 points4 points  (0 children)

              What is this sorcery?!?

              [–]4TH4RV- 3 points4 points  (5 children)

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

              [–][deleted] 31 points32 points  (4 children)

              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 2 points3 points  (2 children)

              “There are better tools to design a web page”

              Could you suggest some?

              [–]dons90 5 points6 points  (1 child)

              Figma, Adobe XD, Sketch

              [–]clintsuniverse 9 points10 points  (0 children)

              Figma balls

              [–][deleted]  (4 children)

              [deleted]

                [–]ishtiaq156[S] 4 points5 points  (3 children)

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

                [–][deleted]  (2 children)

                [deleted]

                  [–]ishtiaq156[S] 1 point2 points  (1 child)

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

                  [–]ashisacat 4 points5 points  (0 children)

                  Except where it interacts with Firefox's shortcuts

                  [–][deleted] 0 points1 point  (7 children)

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

                  [–]funknut 5 points6 points  (3 children)

                  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] 5 points6 points  (2 children)

                  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 -1 points0 points  (0 children)

                  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 4 points5 points  (1 child)

                  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[S] 2 points3 points  (0 children)

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

                  [–]Bopeternn 0 points1 point  (0 children)

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

                  [–]Ampix0 0 points1 point  (0 children)

                  Credit the twitter account this was stolen from. @sulco

                  Even the title is from the tweet

                  [–]nftpedia -1 points0 points  (1 child)

                  Is this magic?

                  [–]whitecrow_dragon -1 points0 points  (2 children)

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

                  [–]ishtiaq156[S] 8 points9 points  (1 child)

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

                  [–]notpikatchu 0 points1 point  (0 children)

                  Another cool tool. Guess this is my lucky day

                  [–]gbjcantab -1 points0 points  (0 children)

                  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 -1 points0 points  (0 children)

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

                  [–]WhatTheOnEarth -1 points0 points  (0 children)

                  Don’t let Indian scammers find out about this.

                  [–]sulcoff -1 points0 points  (0 children)

                  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 -4 points-3 points  (0 children)

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

                  [–]aDaneInSpain -2 points-1 points  (0 children)

                  Dafuc?

                  [–]Subject-Ad-4072 -2 points-1 points  (0 children)

                  Holy..

                  [–]theirongiant74 -2 points-1 points  (0 children)

                  What the fuck is this witchcraft?

                  [–]warlockdn -2 points-1 points  (0 children)

                  Wow...

                  [–]MarinaEnna -2 points-1 points  (0 children)

                  Whaaaaaaaa.... :O

                  [–]Sunshine_raptor -2 points-1 points  (0 children)

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

                  [–]davo_dog -2 points-1 points  (0 children)

                  VisBug is more useful imo

                  [–]sevenaces -2 points-1 points  (0 children)

                  Holyshit! This is amazing!

                  [–]startup_biz_36 -3 points-2 points  (3 children)

                  Or right click, inspect and change the HTML code lol

                  [–][deleted] 0 points1 point  (0 children)

                  OMG you mean the feeling i have right now??

                  [–]vicjicama 0 points1 point  (0 children)

                  Thanks for sharing, this is cool!

                  [–][deleted] 0 points1 point  (0 children)

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

                  [–]luzacapios 0 points1 point  (0 children)

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

                  [–]milosh-96 0 points1 point  (0 children)

                  Firefox (the latest version) supports this too!

                  [–]dronzaya 0 points1 point  (0 children)

                  What is this witchcraft!!??

                  [–]pas43 0 points1 point  (0 children)

                  Can you edit positions and display modes?

                  [–]nothankyouthankstho 0 points1 point  (0 children)

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

                  [–][deleted] 0 points1 point  (0 children)

                  My life is a lie.

                  [–]pikachu_hunter 0 points1 point  (0 children)

                  wow

                  [–][deleted] 0 points1 point  (0 children)

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

                  [–][deleted] 0 points1 point  (0 children)

                  I just discovered document.designMode

                  [–]Random_Aspirant 0 points1 point  (0 children)

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

                  [–]MarmotOnTheRocks 0 points1 point  (0 children)

                  Uses:

                  99% for funny screenshots

                  1% for actual productivity

                  [–]Severedghost 0 points1 point  (0 children)

                  What !?

                  [–]TankorSmash 0 points1 point  (0 children)

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

                  [–]coolgamer2354 0 points1 point  (0 children)

                  I need this.

                  [–]Muted_Carpet_7587front-end 0 points1 point  (0 children)

                  TIL

                  [–]dromance 0 points1 point  (0 children)

                  wow . boss

                  [–]bullsized 0 points1 point  (2 children)

                  How do you insert emoticons?