Sep 27, 2017 Web Development + Tech

Using DevTools to Sidestep Obnoxious Websites

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!

https://twitter.com/coderado/status/913092672948015105

https://twitter.com/coderado/status/913092672948015105

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:

https://twitter.com/cdvillard/status/913105120761716737

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:

https://twitter.com/wesbos/status/905076678547951617

That seems like fair play to me! Tim Murtaugh says he’s used it to get a badly-validated email through a system.

https://twitter.com/murtaugh/status/913091660367765504

https://twitter.com/murtaugh/status/913091660367765504

I know plus signs are particularly useful for Gmail, where using a plus sign at the end of your name (like chriscoyier+mediatemple@gmail.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:

https://twitter.com/jcasabona/status/913092088941744133

https://twitter.com/jcasabona/status/913092088941744133

You could use DevTools in increase security too, if you were so inclined. Like those annoying sites where you can’t paste a password:

https://twitter.com/teleclimber/status/913094173892517890

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?

https://twitter.com/apolakos/status/913098793633140736

https://twitter.com/apolakos/status/913098793633140736

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:

https://twitter.com/BGSIII/status/913093868693757953

Or sneaking a few extra kids into your dorm room:

https://twitter.com/SamRueby/status/913096875334557696

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.

About the Author Chris is a web designer and developer. He writes about all things web at CSS-Tricks, talks about all things web at conferences around the world and on his podcast ShopTalk, and co-founded the web coding playground CodePen. More by this Author