Quick tip: Getting all links from any web site into a spreadsheet using browser developer tools

As part of taking over the editorial job of the WeAreDevelopers newsletter, I needed to get all the links from older editions and import them into a spreadsheet. Eventually I will write a scraping script, but there is a much simpler way to get all the links from a web site into a spreadsheet: browser developer tools. You can follow how that’s done in this video:

The step-by-step instructions:

• Go to the web site you want the links from
• Open Developer Tools (press F12)
• Go to the Console tool
• Enter (or copy and paste) the following: console.table($$('a'),['innerHTML','href'])
• Highlight the table with your mouse
• Copy and paste into your spreadsheet, making sure to only copy the values

This works in Microsoft Edge, Google Chrome, Firefox but for some reason not in Safari

Another issue is that long links and link texts get shortened with a … in Chrome and Edge, to work around that you need to shorten the links first. In my case, I removed the `utm_source=` tracking info. To this end, I had to write another short script in the console to run first.

Using $$('a').forEach(l => {l.href = l.href.replace(/?utm_source=.*$/,'')}) replaces all the utm_source tracking info on each link before calling the console.table.