mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-07 09:54:42 +00:00
Bug 1599027 - Remove http inspector doc. r=Honza.
The page was outdated and incorrect, so we remove it. The architecture diagram of the console is updated to show TabBoxPanel, and we add a quick summary for the external components used in the Console. Differential Revision: https://phabricator.services.mozilla.com/D54463 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
fd401a7368
commit
f4d39529e3
@ -43,7 +43,6 @@
|
|||||||
* [Memory](tools/memory-panel.md)
|
* [Memory](tools/memory-panel.md)
|
||||||
* [Debugger](tools/debugger-panel.md)
|
* [Debugger](tools/debugger-panel.md)
|
||||||
* [Responsive Design Mode](tools/responsive-design-mode.md)
|
* [Responsive Design Mode](tools/responsive-design-mode.md)
|
||||||
* [HTTP Inspector](tools/http-inspector.md)
|
|
||||||
* [Console](tools/console-panel.md)
|
* [Console](tools/console-panel.md)
|
||||||
* [Frontend](frontend/frontend.md)
|
* [Frontend](frontend/frontend.md)
|
||||||
* [Panel SVGs](frontend/svgs.md)
|
* [Panel SVGs](frontend/svgs.md)
|
||||||
|
@ -68,68 +68,77 @@ The React architecture is described on the following diagram.
|
|||||||
|
|
||||||
<figure class="hero">
|
<figure class="hero">
|
||||||
<pre class="diagram">
|
<pre class="diagram">
|
||||||
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
||||||
WebConsole React components │
|
WebConsole React components │
|
||||||
│ [/components] ┌────────────────────────┐
|
│ [/components] ┌────────────────────────┐
|
||||||
│ App │ │
|
│ App │ │
|
||||||
│ └────────────────────────┘
|
│ └────────────────────────┘
|
||||||
│ │
|
│ │
|
||||||
│ │
|
│ │
|
||||||
┌───────────────────┬──────────────────────┬───────────────────┬───────────┴─────────┬───────────────────────┬────────────────────┬─────────────────┐ │
|
┌───────────────────┬──────────────────────┬───────────────────┬───────────┴─────────┬───────────────────────┬────────────────────┬─────────────────┐ │
|
||||||
│ │ │ │ │ │ │ │ │
|
│ │ │ │ │ │ │ │ │
|
||||||
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ │ ┌────────────────────────────────────────┐
|
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼ │ ┌────────────────────────────────────────┐
|
||||||
│ ┌──────────┐ ┌────────────────┐ ┌────────────────┐ ┌───────────┐ ┌────────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌─────────┐ │ Editor │
|
│ ┌──────────┐ ┌────────────────┐ ┌────────────────┐ ┌───────────┐ ┌────────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌─────────┐ │ Editor │
|
||||||
│ SideBar │ │NotificationBox │ │ ConfirmDialog │ │ FilterBar │ │ ReverseSearchInput │ │ConsoleOutput │ │EditorToolbar │ │ JSTerm │──{editor}──▶│ (CodeMirror) │
|
│ SideBar │ │NotificationBox │ │ ConfirmDialog │ │ FilterBar │ │ ReverseSearchInput │ │ConsoleOutput │ │EditorToolbar │ │ JSTerm │──.editor───▶│ <CodeMirror> │
|
||||||
│ └──────────┘ └────────────────┘ │ (portal) │ └───────────┘ └────────────────────┘ └──────────────┘ └──────────────┘ └─────────┘ │ [client/shared/sourceeditor/editor.js] │
|
│ └──────────┘ └────────────────┘ │ <portal> │ └───────────┘ └────────────────────┘ └──────────────┘ └──────────────┘ └─────────┘ │ [client/shared/sourceeditor/editor.js] │
|
||||||
│ └────────────────┘ │ │ │ └────────────────────────────────────────┘
|
│ └────────────────┘ │ │ │ └────────────────────────────────────────┘
|
||||||
│ │ ┌─────────┴─────────────┐ │
|
│ │ ┌─────────┴─────────────┐ │
|
||||||
│ │ │ │ │
|
│ │ │ │ │
|
||||||
│ │ ▼ ▼ ▼
|
│ │ ▼ ▼ ▼
|
||||||
│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │
|
│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │
|
||||||
│ │ │ FilterButton │ │ FilterCheckbox │ │ MessageContainer │
|
│ │ │ FilterButton │ │ FilterCheckbox │ │ MessageContainer │
|
||||||
│ └──────────────────┘ └──────────────────┘ └──────────────────┘ │
|
│ └──────────────────┘ └──────────────────┘ └──────────────────┘ │
|
||||||
│ │ │
|
│ │ │
|
||||||
│ │ │
|
│ │ │
|
||||||
│ │ │
|
│ │ │
|
||||||
│ ▼ │
|
│ ▼ │
|
||||||
│ │ ┌──────────────────┐
|
│ │ ┌──────────────────┐
|
||||||
│ │ Message │ │
|
│ │ Message │ │
|
||||||
│ │ └──────────────────┘
|
│ │ └──────────────────┘
|
||||||
│ │ │
|
│ │ │ ┌─────────────────────────────────────┐
|
||||||
│ │ │
|
│ │ │ │ Frame │
|
||||||
│ ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────────────────────┬───────────────────────────────────────────┐
|
│ ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────┬──▶│ [client/shared/components/Frame.js] │
|
||||||
│ │ │ │ │ │ │ │ │ │
|
│ │ │ │ │ │ │ │ │ └─────────────────────────────────────┘
|
||||||
│ ▼ ▼ ▼ ▼ ▼ ▼ │ ▼ ▼
|
│ ▼ ▼ ▼ ▼ ▼ ▼ │ │
|
||||||
│ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌─────────────────────────────────────┐ ┌────────────────────────────────────────┐
|
│ │ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ ┌────────────────────────────────────────┐
|
||||||
│ │ MessageIndent │ │ MessageIcon │ │ CollapseButton │ │ GripMessageBody │ │ ConsoleTable │ │ MessageRepeat │ │ │ Frame │ │ SmartTrace │
|
│ │ MessageIndent │ │ MessageIcon │ │ CollapseButton │ │ GripMessageBody │ │ ConsoleTable │ │ MessageRepeat │ │ │ │ SmartTrace │
|
||||||
│ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ │ [client/shared/components/Frame.js] │ │[client/shared/components/SmartTrace.js]│
|
│ │ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘ ├──▶│[client/shared/components/SmartTrace.js]│
|
||||||
│ │ │ │ └─────────────────────────────────────┘ └────────────────────────────────────────┘
|
│ │ │ │ │ └────────────────────────────────────────┘
|
||||||
└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
|
||||||
│ │ │
|
│ │ │ │ ┌──────────────────────────────────────────────────┐
|
||||||
│ ├─────────────────────┘
|
│ │ │ │ │ TabboxPanel │
|
||||||
│ │
|
│ ├─────────────────────┘ └──▶│[client/netmonitor/src/components/TabboxPanel.js] │
|
||||||
│ ▼
|
│ │ └──────────────────────────────────────────────────┘
|
||||||
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
│ │
|
||||||
│ Reps ┌──────────────────────┐ │
|
│ │
|
||||||
│ │ [client/shared/components/reps/reps.js] │ ObjectInspector │
|
│ ▼
|
||||||
│ └──────────────────────┘ │
|
│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
||||||
│ │ │
|
│ Reps ┌──────────────────────┐ │
|
||||||
│ ▼ │
|
│ │ [client/shared/components/reps/reps.js] │ ObjectInspector │
|
||||||
│ │ ┌──────────────────────┐
|
│ └──────────────────────┘ │
|
||||||
│ │ ObjectInspectorItem │ │
|
│ │ │
|
||||||
│ │ └──────────────────────┘
|
│ ▼ │
|
||||||
└───────────────────────────────────────────────────────────────▶ │ │
|
│ │ ┌──────────────────────┐
|
||||||
│ ▼
|
│ │ ObjectInspectorItem │ │
|
||||||
┌──────────────────────┐ │
|
│ │ └──────────────────────┘
|
||||||
│ ┌─▶│ Rep │
|
└───────────────────────────────────────────────────────────────▶ │ │
|
||||||
│ └──────────────────────┘ │
|
│ ▼
|
||||||
│ │ │
|
┌──────────────────────┐ │
|
||||||
│ │ │
|
│ ┌─▶│ Rep │
|
||||||
│ └──────────────┘
|
│ └──────────────────────┘ │
|
||||||
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
│ │ │
|
||||||
|
│ │ │
|
||||||
|
│ └──────────────┘
|
||||||
|
─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
||||||
</pre>
|
</pre>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
There are several external components we use from the WebConsole:
|
||||||
|
- ObjectInspector/Rep: Used to display a variable in the console output and handle expanding the variable when it's not a primitive.
|
||||||
|
- Frame: Used to display the location of messages.
|
||||||
|
- SmartTrace: Used to display the stack trace of messages and errors
|
||||||
|
- TabboxPanel: Used to render a network message detail. This is directly using the component from the Netmonitor so we are consistent in how we display a request internals.
|
||||||
|
|
||||||
## Actions
|
## Actions
|
||||||
|
|
||||||
The Console panel implements a set of actions divided into several groups.
|
The Console panel implements a set of actions divided into several groups.
|
||||||
|
@ -1,167 +0,0 @@
|
|||||||
# 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/old/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/old/net/components/net-info-body` component.
|
|
||||||
|
|
||||||
HTTP info is divided into several tabs:
|
|
||||||
|
|
||||||
* Headers: send and received HTTP headers
|
|
||||||
* Params: URL parameters (query string)
|
|
||||||
* Post: HTTP post body
|
|
||||||
* Response: HTTP response body
|
|
||||||
* Cookies: Sent and received cookies
|
|
||||||
|
|
||||||
### Headers Tab
|
|
||||||
`devtools/client/webconsole/old/net/components/headers-tab`
|
|
||||||
|
|
||||||
This is the default active tab and it's responsible for rendering
|
|
||||||
HTTP headers. There are several header groups displayed:
|
|
||||||
|
|
||||||
* Response Headers
|
|
||||||
* Requests Headers
|
|
||||||
* Cached Headers (not implemented yet)
|
|
||||||
|
|
||||||
Individual sections are expandable/collapsible.
|
|
||||||
|
|
||||||
Rendering of the groups is done by `NetInfoGroup` and `NetInfoGroupList`
|
|
||||||
components.
|
|
||||||
|
|
||||||
### Params Tab
|
|
||||||
`devtools/client/webconsole/old/net/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
|
|
||||||
`devtools/client/webconsole/old/net/components/post-tab`
|
|
||||||
|
|
||||||
This tab is responsible for rendering HTTP post body sent to the server.
|
|
||||||
|
|
||||||
### Response Tab
|
|
||||||
`devtools/client/webconsole/old/net/components/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.
|
|
||||||
|
|
||||||
* Raw Data: This section is always displayed. It renders data in a raw
|
|
||||||
form just like they are received from the server.
|
|
||||||
* JSON: This section is available in case of JSON responses [1].
|
|
||||||
It parses the response and displays it as an expandable tree.
|
|
||||||
* Image: This section is available in case of image responses [2].
|
|
||||||
The response is decoded and displayed as an image.
|
|
||||||
* XML: this section is available in case of HTML/XML responses [3]
|
|
||||||
The response is parsed using DOM parser and displayed as an XML markup.
|
|
||||||
|
|
||||||
[1] List of JSON mime-types: `devtools/client/webconsole/old/net/utils/json`
|
|
||||||
[2] List of Image mime-types: `devtools/client/webconsole/old/net/utils/json`
|
|
||||||
[3] List of XML/HTML mime-types: `devtools/client/webconsole/old/net/utils/net`
|
|
||||||
|
|
||||||
Response data are fetched using `LongStringFront`, 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
|
|
||||||
`devtools/client/webconsole/old/net/components/cookies-tab`
|
|
||||||
|
|
||||||
This tab is responsible for displaying HTTP cookies.
|
|
||||||
There are two groups:
|
|
||||||
|
|
||||||
* Request Cookies
|
|
||||||
* Response Cookies
|
|
||||||
|
|
||||||
Rendering of the groups is done by `NetInfoGroup` and `NetInfoGroupList`
|
|
||||||
components. The tab is not presented if there are no cookies.
|
|
||||||
|
|
||||||
## Architecture
|
|
||||||
This sections describes internal architecture of HTTPi feature.
|
|
||||||
|
|
||||||
### Main
|
|
||||||
`devtools/client/webconsole/old/net/main`
|
|
||||||
|
|
||||||
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).
|
|
||||||
|
|
||||||
### NetRequest
|
|
||||||
`devtools/client/webconsole/old/net/net-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
|
|
||||||
`devtools/client/webconsole/old/net/data-provider`
|
|
||||||
|
|
||||||
This module is using webconsole client object to get data from the backend.
|
|
||||||
|
|
||||||
### Utils
|
|
||||||
`devtools/client/webconsole/old/net/utils`
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
### Components
|
|
||||||
* `NetInfoBody` Renders the entire HTTP details body displayed when the
|
|
||||||
user expands a network log.
|
|
||||||
* `NetInfoGroup` Renders a group (a section within tab). For example,
|
|
||||||
Request Headers section in Headers tab corresponds to one group.
|
|
||||||
* `NetInfoGroupList` List of groups. There might be more groups of data
|
|
||||||
within one tab. For example, the Headers tab has Requested and Response
|
|
||||||
headers groups.
|
|
||||||
* `NetInfoParams` List of name-value pairs. It's used e.g. by the Headers
|
|
||||||
or Params tab.
|
|
||||||
* `HeadersTab` Displays HTTP headers.
|
|
||||||
* `PostTab` Displays HTTP posted body data.
|
|
||||||
* `ParamsTab` Displays URL query string.
|
|
||||||
* `ResponseTab` Displays HTTP response body data.
|
|
||||||
* `CookiesTab` Displays cookies.
|
|
||||||
* `Spinner` Represents a throbber displayed when the UI is waiting for
|
|
||||||
incoming data.
|
|
||||||
* `SizeLimit` Represents a link that can be used to fetch the
|
|
||||||
rest of data from the backend (debugger server). Used for HTTP post
|
|
||||||
and response bodies.
|
|
||||||
* `XmlView` Renders XML markup.
|
|
@ -42,7 +42,7 @@ with Files('docs/tools/debugger-panel.md'):
|
|||||||
with Files('docs/backend/debugger-api.md'):
|
with Files('docs/backend/debugger-api.md'):
|
||||||
BUG_COMPONENT = ('DevTools', 'Debugger')
|
BUG_COMPONENT = ('DevTools', 'Debugger')
|
||||||
|
|
||||||
with Files('docs/tools/http-inspector.md'):
|
with Files('docs/tools/console-panel.md'):
|
||||||
BUG_COMPONENT = ('DevTools', 'Console')
|
BUG_COMPONENT = ('DevTools', 'Console')
|
||||||
|
|
||||||
with Files('docs/tools/inspector-panel.md'):
|
with Files('docs/tools/inspector-panel.md'):
|
||||||
|
Loading…
Reference in New Issue
Block a user