如何使用 javascript 从网络选项卡捕获请求？

Question

When I click on a "Load more" button in the website, there are new variations loaded. You can spot them on the "Network" tab in the inspector of google chrome

See here the output when I clicked, the new color options are shown

Once a request with a status are logged in this "network" tab. Is it possible to add a listener or some sort to a specific log of this, for example: once the "Rectangle-Copy-14.png" is logged, call a function.

Asking this for this project but also for in the future, I don't use a lot of javascript in this project but for in the future I will.

Answer 1

If the browser supports it, you could use the resource timing API. I would assume you would have to keep listening to the resources of performance, like:

 performance.getEntriesByType("resource")

Then you can filter this entries by name or type:

resources.filter(resource => resource.name == "Rectangle-Copy-14.png")

If the filter returns a PerformanceResourceTiming with a responseEnd you can then establish that the resource has been loaded and do whatever after.