Scraping data with Chrome Developer Tools

If you want to quickly scrape some data from a website, Chrome Developer Tools will be a convenient tool. Here I am showing the steps how to accomplish just that.

As an example, I am going to scrape the food facts from this web page. This web page lists some of the strangest and most fiscinating food facts.

Inspect the page

Right click at the text element that you want to scrape and select inspect. The developer tools open up in the elements pane.

Use the console

Click the ellipsis (…) on the left side of the elements pane, got to Copy and click on JS path.

Now go over to the console pane and paste the JS path copied earlier and press Enter. You will see something like below:

Add .innerHTML in order to get the text content in between the tag:

On that page there are 30 food facts. To get all the 30 facts, use the following code and paste on the console pane.

Array.from(document.querySelectorAll("div > div.slide-title.clearfix > h2")).map(r => r.innerHTML)

Please note that querySelectorAll is used to select all the facts and the selector path is “div.slide-title.clearfix > h2”. And this is the resule: