Modern browser DevTools, besides being gosh-darned amazing for doing our jobs as front end web developers, can be used to strong arm our way through problems we encounter on the web through our day-to-day normal usage of it.
I bet most of you have run across a paywall on a publication. It tried to get you to pay for the site before you could read the article. But if they did a superficial job, by just laying some elements on top of the article underneath, DevTools to the rescue!
I hide the paywall on those crappy local business journal sites that use JQuery to hide content. I told them about it even. So fair game.
— Jeremy Hull 🏔 (@coderado) September 27, 2017
Jeremy there is aware of the potential morality implications of this. Businesses have to do business activities, after all. Charles says he’ll only do it if there isn’t money involved but just a login hurdle:
I try to respect paywalls; journalists are trying to make a living. That said, I've used DevTools to access free content locked behind login
— Charles D. Villard (@cdvillard) September 27, 2017
To reverse the morality, some might say, you sometimes need to fix a site that is preventing you from doing the thing you need to do. Wes Bos has done a little form hacking to make sure his Canadian address was accepted:
US post office didn’t allow Canadian billing address CC so I dev tools'd the state dropdown to add Ontario and it passed + made the charge!
— Wes Bos 🔥 (@wesbos) September 5, 2017
That seems like fair play to me! Tim Murtaugh says he’s used it to get a badly-validated email through a system.
I used to do it regularly, in order to get emails with a plus sign in them into systems with bad validation.
— Tim Murtaugh (@murtaugh) September 27, 2017
I know plus signs are particularly useful for Gmail, where using a plus sign at the end of your name (like email@example.com) will automatically tag that email with “mediatemple” when it comes into the inbox.
Using DevTools like this can be an education moment as well. In a sense, you’re doing light “hacking” to a website, so that can be eye opening for students and novices alike. It goes a long way toward teaching why your servers need to validated inputs too, not just the browser:
I would do it on sites here and there to show my students why they should validate on the server as well as on the client.
— Joe Casabona (@jcasabona) September 27, 2017
You could use DevTools in increase security too, if you were so inclined. Like those annoying sites where you can’t paste a password:
On a site that blocked pasting passwords. No way I was going to type my 20-char pw! So MacGyver/DevTool'd the input's value attribute.
— Olivier Forget (@teleclimber) September 27, 2017
Pasting a password often means you’re using something so complex it’s more secure, not less.
Or how about making sure you pay your bills ontime, by fixing their dang site for them?
My elec bill website for some reason disables the submit button on payments when using Chrome. Yeah, that ain't gonna fly.
— Anthony Polakos (@apolakos) September 27, 2017
Playing a joke is a fun idea as well! I love this idea, where he gamed his employer’s little health incentive system, but then declined the prize anyway:
Company I worked for rewarded employees for exercise. I devtool’d that I ran 5 marathons that weekend. Got me a $100 gift card, I declined.
— opy & paste (@BGSIII) September 27, 2017
Or sneaking a few extra kids into your dorm room:
A college website validated in js only 2 guests allowed. I disabled the check and submitted; all 4 friends had name tags when we arrived.
— Sam Rueby (@SamRueby) September 27, 2017
Thinking about this from the flip side… Let’s say you’re a company that really doesn’t want people messing with things via DevTools. My general advice would be “let it go, this isn’t a fight you wanna start”, but it’s still an interesting thing to think about from a technical perspective. Ana Tudor recently wrote about this in How to be evil (but please don’t!) – the modals & overlays edition. In this article, Ana talks about a number of weird and interesting ways to prevent users from doing things in DevTools, starting with things like blocking keyboard commands and ending with interesting things like using MutationObserver to watch from DOM changes.