1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
# 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.
|
