Browsing the web like a badass

Tips, hacks, and tricks for people who are okay at computers

Don’t let the cuteness fool you: this Firefox is a badass (image: Monster Mania Firefox by David Lanham)

Like a loyal Labrador, your web browser trudges alongside you through every one of your internet adventures. But have you taken the time to really get to know your browser? Or do you just ignore its super powers & plod along passively, like using the DeLorean as a boring commuter car?

Either way, this post’s for you. I’m going to show a few of what I consider to be the most useful tricks browsers like Firefox & Chrome have to offer. While some of these tips’ll require some coding, most are things nearly any user can pull off (especially if that user isn’t afraid of learning new stuff).

Ready to start browsing the web like an 88 MPH badass?


Screenshot Doctor

Badass level (out of 5): 🦂
Time required: < 5 minutes

Problem: You want a screenshot of something, but the text isn’t exactly what you need.

I saw this a lot in banking, when we wanted to toss a mock headline into a client pitch.

The bad way: Screenshot & photoshop it

Or, if you’re like some places I’ve worked, you send a detailed work request to the graphics department & have them generate a fake headline image in a day or two (!!)

The badass way: Dev tools elements panel

A web page is really just like a Word doc: it’s a file you load on your computer that an app renders, except in this case, the file is HTML instead of .docx, and the app is your browser. This means nearly every thing you see on a webpage can be manipulated right there in your browser.

Here’s how it’s done:

  1. Press (ctrl/cmd) + shift + c to open the “Elements” tab (or “Inspector,” in Firefox) of developer tools. This is essentially an outline of every element in the webpage you’re viewing. We’re going to find our target element and edit its contents.
  2. Press the little icon in the upper left corner of the dev tools
The element picker in Firefox (above) and Chrome (below)
  1. [well, actually, #3, but Medium formatting is being a bit un-badass atm] Mouse-over the element you want to edit — say, the headline of the article. This’ll highlight that element in the developer tools.
  2. In your developer tools, double click the text you’d like to change.
  3. Type your new text & press enter.
Bonus: you can also use this trick to combat #fakenews !

All done! Note that this won’t change anything on the server, so once you close the page, press ‘refresh’ etc., your changes will shuffle off this mortal coil.


Click so hard

Badass level (out of 5): 🦂🦂🦂
Time required: 10 minutes

Problem: You need to check a lot of boxes, but you want your clicking-finger to last past your 50th birthday.

You might encounter this when trying to promote a project on Facebook by inviting your friends to ‘like’ it.

The bad way: click a thousand buttons

My wrist still remembers the last time I did it this way.

The badass way: click() a thousand buttons

You can use JavaScript to mimic all sorts of interactions, from clicking to hovering a mouse. In this case, we’ll use a loop and the click() method on our target checkboxes. If you’ve never worked with CSS selectors before, this could be tricky, but why should that stop you?

  1. Open your Elements panel ( (ctrl/cmd)+shift+c )
  2. Click the ‘element picker’ button in the upper-left corner of the panel
  3. Move your mouse over the checkbox you want click’d
  4. Click it (this won’t actually click / select it since you’ve got the ‘element picker’ active)
  5. In the Elements panel, the checkbox element should be highlighted. Here’s the hard part: you’ve got to find a CSS selector that identifies just the checkboxes you want. I recommend looking for a class name shared by all of the checkboxes (e.g., .target-checkbox) or, failing that, finding the common parent of all your checkboxes (e.g., .checkbox-parent > input)
  6. Press esc to make the Console appear
  7. In the console, build an array of your checkboxes like this: checks = document.querySelectorAll('.my-checkbox')
  8. Type checks.length to ensure you’ve got the correct amount of checkboxes
  9. Now loop thru every checkbox & click that sucker: checks.forEach(c => c.click && c.click())
The element picker in Firefox (above) and Chrome (below)

Here’s what that looks like in real-time:

Now you’re clickin’! h/t to http://www.screentogif.com/ , the best (and free-est) animated gif screencast app around

Boom: all checked. Note that if the checkboxes talk to a server or something when you click them, you probably want to add a small delay into the loop (but that’s a bit out of scope for this tutorial, so you’ll have to use your personal badass time).


Quick & dirty web-scraping

Badass level (out of 5): 🦂🦂🦂🦂
Time required: 1–5 hours

You might need to know a bit of JavaScript for this one.

Problem: A web page has lots of data you need.

Web browsers are meant to view content, so they’re not so good at extracting it.

The bad way: Write a scraper

Even for the experienced programmer, writing the scraper, setting-up the project, dealing with authentication, etc., is an enormous barrier to those times where you just want a dab of data.

Copying / pasting is also an option, but if the data isn’t in the shape you need, this can take lots of time, too.

The badass way: copy() / paste

I’ve met even professional web developers who aren’t hip to the copy() function. As far as I know, it only works in the browser console (ctrl+shift+j in Chrome, ctrl+shift+k in Firefox), and it does what you think it does: copies whatever argument you pass to the clipboard. The function struts its stuff, though, when combined with a dash of JavaScript to extract and format the data.

Let’s consider a simple page with a basic HTML table. While regular copy / paste might work fine here, I’m using this page because its simplicity lets us focus on understanding how to use copy().

  1. On the page, open your console (ctrl+shift+j in Chrome, ctrl+shift+k in Firefox)
  2. Paste this JavaScript function into the console & press enter:
// first we capture each row of the table & convert it from a 
// NodeList to an array
[...document.querySelectorAll('#tblIncidents tr')]
.map(n =>
// now we pull each cell from the row...
[...n.querySelectorAll('td')]
// ... and extract its text content
.map(n => n.textContent)
// ... then separate each column with a tab character
.join('\t')
// now join all rows together for a nice tsv table
).join('\n')
Here’s the formatted data printing to the console

3. Now that you know what the data looks like post-scrape, let’s copy it like a hax0r. Paste this snippet into your console — it’s the same thing as above, except it’s wrapped in copy()

copy([...document.querySelectorAll('#tblIncidents tr')]
.map(n =>
[...n.querySelectorAll('td')]
.map(n => n.textContent)
.join('\t')
).join('\n'))

Voila — your clipboard is now full of data ready to paste into Excel, Sheets, etc.

copy() also works with JavaScript data types, allowing you to, say, copy the results of a massive output to your clipboard without scrolling for 20 minutes.

Of all the tricks here, in my experience, this technique comes in handy the most frequently. For scrape jobs that require a little more, though, I recommend OctoParse. It’s pretty simple to learn, and, most of the time, it’s a hell of a lock quicker than rolling your own scraper.


Just like there’s space between “professional chef” and “can’t even boil water,” there’s an entire world in between “layperson” and “professional developer.”

Take the time to learn a few hacks, tricks, and time-savers like the ones in this article, and you’ll be a web badass (the sous chef of the tech world) faster than you can click 11,000 checkboxes on a poorly designed web form.