Browsing the web like a badass
Tips, hacks, and tricks for people who are okay at computers
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?
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:
(ctrl/cmd) + shift + cto 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.
- Press the little icon in the upper left corner of the dev tools
- [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.
- In your developer tools, double click the text you’d like to change.
- Type your new text & press enter.
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
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?
- Open your Elements panel (
- Click the ‘element picker’ button in the upper-left corner of the panel
- Move your mouse over the checkbox you want click’d
- Click it (this won’t actually click / select it since you’ve got the ‘element picker’ active)
- 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)
escto make the Console appear
- In the console, build an array of your checkboxes like this:
checks = document.querySelectorAll('.my-checkbox')
checks.lengthto ensure you’ve got the correct amount of checkboxes
- Now loop thru every checkbox & click that sucker:
checks.forEach(c => c.click && c.click())
Here’s what that looks like in real-time:
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
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,
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
- On the page, open your console (
// first we capture each row of the table & convert it from a
// NodeList to an array
// now we pull each cell from the row...
// ... and extract its text content
.map(n => n.textContent)
// ... then separate each column with a tab character
// now join all rows together for a nice tsv table
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
.map(n => n.textContent)
Voila — your clipboard is now full of data ready to paste into Excel, Sheets, etc.
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.