I want to know the size of transferred data for a website (including ajax data) in KB.
In Chrome DevTools, when the size is larger than 1 MB, it switches from KB to MB, so I loose precision. I want to know the size in KB, but I can't find that information anywhere. Does anybody have an idea how to get that information in Chromium?
If the server sends back a Content-Length header in the Response Headers, you can view the size of the data, in bytes, that is sent to the client in the Network tab as per below.
If there is no Content-Length header returned, you can look at the HTTP Archive (HAR) for the transfer size (discussed here). Right click on the Source and select 'Copy all as HAR'. Paste this into a text editor and you will see the full response object. Search for the 'Request URL' you are looking for, and you should see a _transferSize property with a corresponding value in bytes within the Response section.
Place the mouse on the specific number, you can see the data accurate to the byte.
1KB = 1024B
want to know the size of transferred data for a website (including ajax data) in KB.
Related
Update: We found out that this 1 MB kind of range was coming due to our own code only. After making a check for that, the issue got resolved.
We have implemented an Http server and it can serve the file with/without range. We notice that Google Chrome somehow requests higher range than the actual size. For example, for < 1 MB file, it will request exactly 1 MB (1000000) bytes as range. For more than 1 MB file size, it will request exactly 2 MB (2000000) and so on.
Eventually the subsequent requests are coming proper and catered accordingly. But for a given file, the initial requests are purposefully overwhelming. We tried to serve, file size instead of higher range requested, but that doesn't work.
Why does Chrome request higher range in first place and how to deal with it at the server side?
How these two data amounts, that are located at the bottom of Network Tab differ?
"Transferred" is the compressed size of all resources. You can think of it as the amount of upload and download data that a mobile user will use in order to load this page. "Resources" is the uncompressed size of all resources.
In addition to the other answers, if you have filtered the results you will see two numbers in one column, first one indicating the size for the filtered requests and the latter for the total size of requests.
For example if you have filtered the results to only display XHR requests and you see 1 MB / 2 MB transferred at the bottom, that indicates 2 MB has been transferred in total, of which 1 MB are XHR requests.
An important difference not mentioned in the other answers is that "resources" will include any cached data, whereas "transferred" (as the name implies) only shows the actual downloaded data when loading the page.
This can easily be verified by ticking the Disable cache checkbox in the toolbar on top of the request list - once enabled there is a considerable difference in filesize of "transferred" and "resources" (in addition to the difference caused by compression).
Current Network Devtools tab displays MBs:
Is there some settings to display MBs in KBs and in full number, not decimal (33.5 as 33500)? Need to know precise value (e.g. 33.5 => 33527)
I don't think there is a way to change the unit used by the Size column, but you can do one of the following:
download the file and inspect its size locally
add a column for a 'Content-Length' response header
As you can see on the screenshot it's not perfect though - it's provided by the server and it's not required.
export entry as a HAR file and look up the exact value
use the Resource Timing API to list all resources in the console
(see Possible to list external resources loaded on a webpage with JavaScript? )
On the Network Tab of the Chrome Devtools I cannot understand the difference between the 2 data values reported (850KB / 14.7 MB transferred). I assume the first value 850KB is data size and the second value 14.7 MB the transferred data. However I am confused.
What is the actual size of the files?
Shouldn't the size of the files equal the size of the transferred values or shouldn't the transferred size (I assume 14.7 MB) be smaller than the actual size of the files (in case the files were compressed)?
The chrome devtools page on resource loading measurements report only one value; so I am confused.
Chrome inspect gives u a bunch of filters such as All,XHR , JS , img. So the amount is for the filtered part of ur data. If you select "All" option in the filter you will find something like 14.7MB/14.7MB
On top, you can see the size of the file transferred over the network (which may be compressed by your server).
The uncompressed size of the file is displayed in gray just below.
Official documentation here: https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed
I have Disable cache tick removed and still request is made on each video loop iteration(Only on chrome).
What Initiator: Other mean in chrome inspector network section? First time the video is loaded from the host, but after that all requests are loaded from Other.
Each iteration video size is the same, not (from cache). Is that mean the browser download it every time?
Can it be avoided somehow without saving the video in localStorage(I saw it in similar question), because this solution will not work in private browser mode and localStorage have size limit?
UPDATE
With Disable cache checked
Without Disable cache checked
UPDATE
Bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=680063
The meaning of this is that another process than Chrome initiated the request:
Some other process or action initiated the request, such as the user
navigating to a page via a link, or by entering a URL in the address
bar.
In the case of Chrome, video is decoded using ffmpeg which likely is this other process. The process is likely reopening the file from the cache which is why the request is initiated, or, the cache only holds the latter part (or max content length in sum) of the file in case the file is large and has to re-stream parts of the content over again - though, you state that when cache is disabled this doesn't happen.
localStorage has a very limited size and is not very suitable for storing video data (it can only hold strings so video must be encoded as mime-64 which increases the size 33% + each char takes up two bytes due to unicode).
A better alternative would be to use IndexedDB - this can hold much larger data as well as store the data in binary format (Blob). But it comes with an initial limit as with localStorage but contrary to the latter method you can request a larger size which the user need to confirm. I haven't tested, but I would assume you will run into the same limitations with private mode as with any other storage mechanism.
Yesterday I had the same issue. I found that Chrome's tab crashes after a couple of minutes. It looks it happens only when Disable cache is checked, but if this still bugs you, you can store the video into the local storage. More code in this answer.