Pure Console Navigation

This will be an unusually mundane post, and probably of no interest to people who don't already know some javascript and occasionally harvest data. But to those who do, it may be truly thrilling.

Public service announcement: the browser console is strictly more expressive than everything in the page.

It's clunky as hell, yes, but it is also stronger, and there's a threshold for 'weirdly repetitive browser navigation task' beyond which it might be better to just cobble together some javascript. I'm talking about copying like 30 values off a horribly-yet-consistently formatted webpage, possibly spread between like 20 sections which are somehow never open at once. Especially if it's something you have to spend >5 minutes on every <week.

Here's (roughly) how:

Open the console

Ctrl-Shift-I in Chrome; I believe Ctrl+Shift+K in Firefox.

Pick out the thing(s) you want

You can pick things out using any of the following functions:

Document.getElementsByClassName(), Document.getElementsByTagName(), Document.querySelector(), Document.getElementById()

(1) This will return a HTMLCollection, not an array, so if you want to iterate over everything you'll need to turn it into an array with Array.from()

(2) If you can't get the exact thing you want, get something that contains it, then use .childNodes to get an array of its child nodes. You can also use all the .get functions on elements to get their children.

Get the details you want

When you've navigated to the right element, use .innerHTML, .innerText, or .value to get the thing inside it. One of them will work, probably innerHTML. value is for inputs.

Do other things on the page

Remember, it's your page, you can do what you want. You can change the .style, you can .remove() things, you can even .click() on things.

It's even pretty straightforward to save stuff to your computer.

Show Comments