How to display MBs in KBs in Chrome Devtools Network panel? - google-chrome

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? )

Related

How to use HTTP Sniffer (Chrome Network tab) to auto download files based on file name

When I use the Chrome network tab I there a certain files I can see that have the file have the same names (different address though) each time I go to a different page.
In the network tab I can download the files manually but is there simple way to download the files based on the files name since they are the same per page. I'm sure there is a way to do it with code, but I don't know any code.
Ok There is a number of things you can look at in terms of software that is out there
If you looking for network packets and want to analyse what is moving through your TCP sockets use WireShark
If you are looking at copying an entire website to analyse it you can use one of the website grabbers , Ive used Httrack but there is a whole list of themWebsite grabbers

get a json file that a webpage is made of

I'm not familiar with web development but I believe this web page text content
https://almath123.github.io/semstyle_examples/
is made of two JSON files mentioned in it (semstyle_results.json and semstyle_results.json) and the JSON files are completely present in ram (If this is the correct term for referring to it) because when I disconnect the internet I can still browse the page and see the text content.
I want to download semstyle_results.json file. Is that possible? how can I do that?
Technically if you visit a website you're "downloading" the content. Your browser sends a request for information and a server responds by sending you the information. You're viewing that information locally. Dynamic sites poll or make further requests as you browse to keep the data updated and relevant, but it's sent to you.
If you want to easily download any of the content from the website, a simple way is to open up the development tools (CTRL + SHFT + I on windows for Firefox and Chrome), go to a source file and click save as. The network tab shows you requests that were made which includes not just files such as json but also the details of the request.
Here is a screenshot locating one of the json files in a Chrome-based browser (Brave)
The webpages may not always show that they will support json or xml return of data. For example if you inspect this webpage SEC EDGAR database using the method described above, it shows no json link but if you append index.json at the end of the link it will return the same data in json format or xml format, if you so please.
i.e: same website but with json endpoint
So it is always a good idea to see if the website hosts developer information. For example SEC EDGAR provides developer tools that mentions that the directory structure can be accessed via HTML, XML or JSON.
SEC developer information

Chrome DevTools - exact size of transferred data

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.

auto complete dropdown with huge and dynamic json file

i am looking for a solution for an auto-complete dropdown box which needs to load entries from a huge json (json file is also being updated / generated every second.)
I tried "typeahead.js" but by default it caches the json file in browser and was not able to display new entries added to json file.
is there a solution for an auto-complete text box which can load entries from the server as fast as possible ?
please suggest.
thanks
In your case, you can take advantage of Bloodhound, the typeahead.js suggestion engine. It provides two options. Prefetch and Remote.
In Prefetch, data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.
In Remote, it will fetch data from remote source when ever you need it. But remember, in order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.
I think you should user Remote option in your situation.
Reference : Link
There are two ways which are mentioned in the documentation for typeahead.js
You can make the TTL value = 1 for prefetch ( this did;t work for me )
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md
Or you can use clearPrefetchCache on click page load or click of a button .
category.clearPrefetchCache();

Different HTML pages using the same image, does the browser fetch the image once and use it twice?

I've got an odd question. Say I have two HTML pages index1.html and index2.html. In both the pages is some jpg image called "Hello". When I use the browser to point to say www.testing.com/index1.html the browser will load index1.html and the image Hello.
Now my question is when I go click on some link in index1.html that takes me to index2.html, will the browser look to go to back to the server to get image Hello or will it use the Hello image used in index1.html?
It depends on the caching headers the server sends out alongside the image.
There are several ways in which caching can be done.
When a resource is served with an expiry date in the future, the browser will use its cached copy until that date is reached (or the cache is emptied or a refresh forced.
Another way is for the server to listen to the If-modified-since request header. The server can then check whether the resource has been modified since that date. If it hasn't, it will return a 304 not modified status; otherwise, the updated resource.
The Apache Caching guide is a (lengthy) introduction to the subject.
To see in your browser what caching rules apply, open its developer tools and look for the "Net" tab. It's a list of all the requests that were made in connection with the current page. It'll tell you whether a resource was loaded from the server, or a cached copy used.
For example, this result on a Stack Overflow image from Chrome's developer tools:
suggests the image was cached. When I click that row, I can switch to the "header" view, where I can see the exact caching instructions the server sends:
It means that as long as the browser has a cached copy of the image, it will keep on using that without ever checking with the server until December 17, 2014.
Different browsers handle this differently. It can also depend on user settings. Users can set the browser to cache nothing if they so desire.