12/21/2023 0 Comments Firebug net monitor![]() ![]() ![]() If you move mouse over the graph there is a detailed tooltip info. Net panel uses this graphical representation to show request load in time together with timing data. One of the most useful features for debugging page load performance is a request Timeline. Not to forget, in order to have this tab, you need the Firecookie extension installed. This tab comes from a Firecookie extension. An example is a Cookies tab that shows all send and received cookies for a request. There can be also other tabs coming from Firebug extensions. Device - id for the device that stores this cache entry.Fetch Count - number of times the cache entry has been opened.Expires - expiration time of the cache entry.Last Fetched - last time the cache entry was opened.Last Modified - last time the cache entry was modified.Also, the summary row shows amount of data coming from the cache. The image above shows a case when both requests came from the browser cache - response status is 304 Not Modified. If a network response comes from the browser cache, there is a Cache tab, showing an info that is related to the appropriate cache-entry. In case of a JSON response, there is yet another tab that uses expandable hierarchical tree to display all received data.Ī live example is available. If the requests is sending any data using POST or PUT HTTP method, there is another tab with sent data.Ĭlick here for a live example. The example above shows parameters for the following URL: If a network request uses a query string (URL parameters), another Params tab is available providing tabular info about all specified parameters. HTML - preview of an HTML response (available only if the response is an HTML).Response - data returned from the server.Headers - request and response HTTP headers.No matter if it comes from the server or the browser cache, one request-response round-trip is represented by one entry in the list.Ĭlick on the following screenshot to see all headers. It's important to note that the entry actually represents both: the request sent to the server and also the response coming back. Net Request & Response DetailsĮvery request entry can be expanded by clicking on the left hand plus button in order to see additional info. This message is appended into the list of request every time the panel is disabled and enabled again so, it's obvious that some requests doesn't have to be displayed. This is important since if the user isn't interested in HTTP tracking, there are no performance penalties if the panel is disabled. Not to forget, there is a message at the top of the list explaining that if the panel isn't enabled nothing is monitored. The total page load time was 108 milliseconds (since the beginning of the first request to the end of the last request).The size of the requested data is 222 B.There is also a summary info at the bottom of the request list. Graphical timeline and load time info ( 80ms).Domain name from where the response came from ( ).Requested file name ( test.htm) And if the mouse cursor moves over it, entire URL is displayed.Response status and description ( 200 OK).For now it's enough to say that it took 80ms to load the page testPage.htm and after it was loaded the script file testScript.js started to load, which took another 25ms (see more info about the Timeline below). If you have Firebug installed enable Net panel and click here to see the example live.Įach entry displays basic info about the request and a graphical Timeline that depicts load phases in time. The first request is for the top test.htm document (the page itself) and the second for embedded testScript1.js script file. The image above shows the result from a page that sent two network requests to the server in order to load. It's content is composed from list of entries where each entry represents one request/response round trip made by the page. The main purpose of the Net panel is to monitor HTTP traffic initiated by a web page and simply present all collected and computed information to the user. You'll be surprised how many features is there! □ Also notice that all features described below are available (some of them introduced) in Firebug 1.4. This post is not about developing an extension for this panel or Firebug itself. This post is intended as a detailed explanation of the Net panel from the user perspective. Since there is not much user documentation related to Firebug features (and there is a lot what to know about) I have decided to put together several posts about existing features.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |