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!

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:

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:

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

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

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

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?

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:

Or sneaking a few extra kids into your dorm room:

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