Can you access the Chrome Developer network tab data?

Question

Is there a way of using the data generated within the chrome developers network tab? How is the data generated?

I'm looking into Puppeteer. I'd like to loop through all the images on a page and return an image size for these images.

I've tried using the Resource Timing API but transferSize, encodedBodySize or decodedBodySize don't return the value I'm looking for.

I would like access to this:

https://i.imgur.com/g7blgmj.png

Is this possible?

Answer 1

This can be achieved reasonably if you follow the steps below. This might not be the perfect solution. But, you can get to the details that you are looking for.

1. Open your Dev Tools. Go to Network tab.
2. Get rid of columns that don't want to download. (You can do this by right clicking and clicking on the tick. When you untick, the column will get removed from the console) - See the 1st screenshot below.
3. Select all items (press Ctrl + A).
4. Right click press Copy (or just Ctrl + C) - See the 2nd screenshot below.
5. Paste it to Notepad++ and see.

Hope this helps

Answer 2

这是我需要的资源计时 API