"Fossies" - the Fresh Open Source Software Archive

Member "UXP-2019.10.31/devtools/docs/http-inspector.md" (30 Oct 2019, 6473 Bytes) of package /linux/www/UXP-2019.10.31.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format (assuming markdown format). Alternatively you can here view or download the uninterpreted source code file. A member file download can also be achieved by clicking within a package contents listing on the according byte size field.

HTTP Inspector (aka XHR Spy)

This document is intended as a description of HTTP Inspector feature allowing inline inspection of HTTP logs displayed in the Console panel. The documents focuses on internal architecture.

For detailed feature description see the following doc (many screenshots included): https://docs.google.com/document/d/1zQniwU_dkt-VX1qY1Vp-SWxEVA4uFcDCrtH03tGoHHM/edit#

HTTP Inspector feature is available in the Console panel (for web developers) as well as in the Browser Console (for devtools and extension developers).

The current implementation is based on React (no XUL) and some of the existing components should also be used when porting the Network panel to HTML.

The entire feature lives in devtools/client/webconsole/net directory.

General Description

The entry point for HTTP log inspection is represented by an expand/toggle button displayed in front a log in the Console panel:

[+] GET XHR http://example.com/test-request.php

Clicking on the [+] button expands the log and shows a body with HTTP details right underneath. The info body is rendered by: devtools/client/webconsole/net/components/net-info-body component.

HTTP info is divided into several tabs:

Headers Tab


This is the default active tab and it’s responsible for rendering HTTP headers. There are several header groups displayed:

Individual sections are expandable/collapsible.

Rendering of the groups is done by NetInfoGroup and NetInfoGroupList components.

Params Tab


This tab is responsible for rendering URL parameters (query string) and it’s available only if the URL has any parameters. Individual parameters are parsed and displayed as a list of name/value pairs.

Rendering of the parameter list is done by NetInfoParams component.

Post Tab


This tab is responsible for rendering HTTP post body sent to the server.

Response Tab


This tab is responsible for rendering HTTP response body received from the server. There might be more than one section displaying the data depending on the current response mime-type.

[1] List of JSON mime-types: devtools/client/webconsole/net/utils/json [2] List of Image mime-types: devtools/client/webconsole/net/utils/json [3] List of XML/HTML mime-types: devtools/client/webconsole/net/utils/net

Response data are fetched using LongStringClient, so if data are bigger than defined limit (see `devtools/server/main.js - LONG_STRING_LENGTH) the user needs to manually require the rest (there is a link at the end of incomplete response body that allows this).

The raw section is collapsed by default if there is another presentation of the data.

Cookies Tab


This tab is responsible for displaying HTTP cookies. There are two groups:

Rendering of the groups is done by NetInfoGroup and NetInfoGroupList components. The tab is not presented if there are no cookies.


This sections describes internal architecture of HTTPi feature.



This is the main module of HTTPi. It represents the root module of the feature.

The main responsibility of the module is handling network logs forwarded from webconsole.js. This modules creates one instance of NetRequest object for every NetworkEvent (one object for every HTTP request).



This module represents NetRequest object. It’s the internal representation of HTTP request and it keeps its state. All HTTP details fetched dynamically from the backend are stored in this object.

This object is responsible for: * Adding a toggle button in Console UI (displayed in front of HTTP requests) * Listening for a click event on the toggle button. * Sending messages to web console client object to request HTTP details. * Refreshing the UI as HTTP details are coming from the overlay.

Note that NetRequest is using a small helper object DataProvider for requesting HTTP details. DataProvider is the connection between NetRequest and the backend.

Data Provider


This module is using webconsole client object to get data from the backend.



There are also some utility modules implementing helper functions. The important thing is that these modules doesn’t require any chrome privileges and are ready to run inside content scope.