1

in the context you access a website, the browser dowload all required files (static files : CSS, scripts) or via AJAX. OK. You can see the dowload process in realtime using the Network tab in your devtools browser.

My question is : is it possible to "listen" to a file being dowloaded using JavaScript as the browser does in the Network tab ? A concrete example would be to show the user what the browser is being dowloaded in from my website.

While searching over the Internet, I'v seen it's possible to overload xhr native functions : Add a "hook" to all AJAX requests on a page

Nevertheless, I don't think images and CSS download will trigger xhr function because the browser processes in it's own way.

I'm keen to hear the community about it.

Thanks in advance !

Community
  • 1
  • 1
Tanooki
  • 13
  • 2

1 Answers1

0

If you are explicitly downloading resources in your JavaScript code, you can inject hooks to track the AJAX requests, as per your message above. You can alternatively use the Resource Timing API to track network timing information of your requests, which is nice.

However, it is not possible to see the Network information of resources out of your control, as it requires access to the browser engine.

It is possible to get such information using a Chrome Extension, as an API exists that opens you up to this information. See chrome.devtools.network.

Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68