72 lines
3.3 KiB
Markdown
72 lines
3.3 KiB
Markdown
# Console Tool Architecture
|
|
|
|
The Console panel is responsible for rendering all logs coming from the current page.
|
|
|
|
## Architecture
|
|
|
|
Internal architecture of the Console panel (the client side) is described
|
|
on the following diagram.
|
|
|
|
```{mermaid}
|
|
flowchart TB
|
|
DevTools["DevTools<br/>[client/framework/devtools.js]"]
|
|
-- "openBrowserConsole() or<br/>toggleBrowserConsole()"
|
|
--> BrowserConsoleManager["BrowserConsoleManager<br/>[browser-console-manager.js]"]
|
|
-- "{_browserConsole}"
|
|
--> BrowserConsole["BrowserConsole<br/>[browser-console.js]"];
|
|
WebConsolePanel["WebConsolePanel<br/>[panel.js]"] -- "{hud}" --> WebConsole["WebConsole[webconsole.js]"]
|
|
-- "{ui}" --> WebConsoleUI["WebConsoleUI<br/>[webconsole-ui.js]"]
|
|
-- "{wrapper}" --> WebConsoleWrapper["WebConsoleWrapper<br/>[webconsole-wrapper.js]"]
|
|
-- "ReactDOM.render" --> App;
|
|
BrowserConsole -- extends --> WebConsole;
|
|
```
|
|
|
|
## Components
|
|
|
|
The Console panel UI is built on top of [React](../frontend/react.md). It defines set of React components in `components` directory
|
|
The React architecture is described on the following diagram.
|
|
|
|
```{mermaid}
|
|
flowchart TB
|
|
subgraph React Components
|
|
direction TB
|
|
App --> SideBar & NotificationBox & ConfirmDialog & FilterBar & ReverseSearchInput & ConsoleOutput & EditorToolbar & JSTerm
|
|
FilterBar --> FilterButton & ConsoleSettings
|
|
ConsoleOutput --> MessageContainer --> Message
|
|
Message --> MessageIndent & MessageIcon & CollapseButton & GripMessageBody & ConsoleTable & MessageRepeat
|
|
end
|
|
subgraph Reps
|
|
direction TB
|
|
ObjectInspector["ObjectInspector"] --> ObjectIspectorItem --> Rep["Rep<br/>[client/shared/components/reps/rep.mjs"] --> Rep
|
|
end
|
|
SideBar & ConsoleTable & GripMessageBody --> Reps
|
|
Message --> Frame["Frame<br/>[client/shared/components/Frame.js]"] & SmartTrace["SmartTrace<br/>[client/shared/components/SmartTrace.js]"] & TabboxPanel["TabboxPanel<br/>[client/netmonitor/src/components/TabboxPanel.js]"]
|
|
JSTerm -- editor --> Editor["Editor<br/>[client/shared/sourceeditor/editor.js]"]
|
|
```
|
|
|
|
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
|
|
|
|
The Console panel implements a set of actions divided into several groups.
|
|
|
|
- **Filters** Actions related to content filtering.
|
|
- **Messages** Actions related to list of messages rendered in the panel.
|
|
- **UI** Actions related to the UI state.
|
|
|
|
### State
|
|
|
|
The Console panel manages the app state via [Redux](../frontend/redux.md).
|
|
|
|
There are following reducers defining the panel state:
|
|
|
|
- `reducers/filters.js` state for panel filters. These filters can be set from within the panel's toolbar (e.g. error, info, log, css, etc.)
|
|
- `reducers/messages.js` state of all messages rendered within the panel.
|
|
- `reducers/prefs.js` Preferences associated with the Console panel (e.g. logLimit)
|
|
- `reducers/ui.js` UI related state (sometimes also called a presentation state). This state contains state of the filter bar (visible/hidden), state of the time-stamp (visible/hidden), etc.
|