devtools/docs/tools/console-panel.md


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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

# 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.

<figure class="hero">
  <pre class="diagram">
┌──────────────────────────────┐               ┌────────────────────────┐
│           DevTools           │               │    WebConsolePanel     │
│[client/framework/devtools.js]│               │       [panel.js]       │
└──────────────────────────────┘               └────────────────────────┘
                │                                           │
                                                            │
     openBrowserConsole() or                                │
     toggleBrowserConsole()                                 │
                │                                           │
                ▼                                           │
┌──────────────────────────────┐                          {hud}
│    BrowserConsoleManager     │                            │
│ [browser-console-manager.js] │                            │
└──────────────────────────────┘                            │
                │                                           │
                │                                           │
      {_browserConsole}                                     │
                │                                           │
                ▼ 0..1                                      ▼ 1
┌──────────────────────────────┐               ┌────────────────────────┐
│        BrowserConsole        │               │       WebConsole       │
│     [browser-console.js]     │─ ─ extends ─ ▶│    [webconsole.js]     │
└──────────────────────────────┘               └──────────────1─────────┘
                                                            │
                                                          {ui}
                                                            │
                                                            ▼ 1
                                               ┌────────────────────────┐             ┌─────────────────────────────────┐
                                               │      WebConsoleUI      │            1│    WebConsoleConnectionProxy    │
                                               │   [webconsole-ui.js]   │───{proxy}──▶│[webconsole-connection-proxy.js] │
                                               └────────────────────────┘             └─────────────────────────────────┘
                                                            │                                          │
                                                       {wrapper}
                                                            │                                          │
                                                            │
                                                            │                                          │
                                                            ▼ 1
                                               ┌────────────────────────┐                              │
                                               │   WebConsoleWrapper    │
                                               │[webconsole-wrapper.js] │◀ ─ ─ ─calls methods from ─ ─ ┘
                                               └────────────────────────┘
                                                            │
                                                        <renders>
                                                            │
                                                            ▼
                                               ┌────────────────────────┐
                                               │          App           │
                                               └────────────────────────┘
    </pre>
  <figcaption>Elements between curly bracket on arrows represent the property name of the reference (for example, the WebConsolePanel as a `hud` property that is a reference to the WebConsole instance)</figcaption>
</figure>

## 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.

<figure class="hero">
  <pre class="diagram">
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─                                                              
  WebConsole React components                                                                                                                                          │                                                             
│ [/components]                                                       ┌────────────────────────┐                                                                                                                                     
                                                                      │          App           │                                                                       │                                                             
│                                                                     └────────────────────────┘                                                                                                                                     
                                                                                   │                                                                                   │                                                             
│                                                                                  │                                                                                                                                                 
        ┌───────────────────┬──────────────────────┬───────────────────┬───────────┴─────────┬───────────────────────┬────────────────────┬─────────────────┐          │                                                             
│       │                   │                      │                   │                     │                       │                    │                 │                                                                        
        ▼                   ▼                      ▼                   ▼                     ▼                       ▼                    ▼                 ▼          │       ┌────────────────────────────────────────┐            
│ ┌──────────┐     ┌────────────────┐     ┌────────────────┐     ┌───────────┐    ┌────────────────────┐     ┌──────────────┐     ┌──────────────┐     ┌─────────┐             │                 Editor                 │            
  │ SideBar  │     │NotificationBox │     │ ConfirmDialog  │     │ FilterBar │    │ ReverseSearchInput │     │ConsoleOutput │     │EditorToolbar │     │ JSTerm  │──.editor───▶│              <CodeMirror>              │            
│ └──────────┘     └────────────────┘     │    <portal>    │     └───────────┘    └────────────────────┘     └──────────────┘     └──────────────┘     └─────────┘             │ [client/shared/sourceeditor/editor.js] │            
        │                                 └────────────────┘           │                                             │                                                 │       └────────────────────────────────────────┘            
│       │                                                    ┌─────────┴─────────────┐                               │                                                                                                               
        │                                                    │                       │                               │                                                 │                                                             
│       │                                                    ▼                       ▼                               ▼                                                                                                               
        │                                          ┌──────────────────┐    ┌──────────────────┐            ┌──────────────────┐                                        │                                                             
│       │                                          │   FilterButton   │    │  FilterCheckbox  │            │ MessageContainer │                                                                                                      
        │                                          └──────────────────┘    └──────────────────┘            └──────────────────┘                                        │                                                             
│       │                                                                                                            │                                                                                                               
        │                                                                                                            │                                                 │                                                             
│       │                                                                                                            │                                                                                                               
        │                                                                                                            ▼                                                 │                                                             
│       │                                                                                                  ┌──────────────────┐                                                                                                      
        │                                                                                                  │     Message      │                                        │                                                             
│       │                                                                                                  └──────────────────┘                                                                                                      
        │                                                                                                            │                                                 │         ┌─────────────────────────────────────┐             
│       │                                                                                                            │                                                           │                Frame                │             
        │                                  ┌─────────────────────┬─────────────────────┬─────────────────────┬───────┴─────────────┬─────────────────────┬─────────────┼─────┬──▶│ [client/shared/components/Frame.js] │             
│       │                                  │                     │                     │                     │                     │                     │                   │   └─────────────────────────────────────┘             
        │                                  ▼                     ▼                     ▼                     ▼                     ▼                     ▼             │     │                                                       
│       │                        ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐  ┌──────────────────┐          │   ┌────────────────────────────────────────┐          
        │                        │  MessageIndent   │  │   MessageIcon    │  │  CollapseButton  │  │ GripMessageBody  │  │   ConsoleTable   │  │  MessageRepeat   │    │     │   │               SmartTrace               │          
│       │                        └──────────────────┘  └──────────────────┘  └──────────────────┘  └──────────────────┘  └──────────────────┘  └──────────────────┘          ├──▶│[client/shared/components/SmartTrace.js]│          
        │                                                                                                    │                     │                                   │     │   └────────────────────────────────────────┘          
└ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─      │                                                       
        │                                                                                                    │                     │                                         │   ┌──────────────────────────────────────────────────┐
        │                                                                                                    │                     │                                         │   │                   TabboxPanel                    │
        │                                                                                                    ├─────────────────────┘                                         └──▶│[client/netmonitor/src/components/TabboxPanel.js] │
        │                                                                                                    │                                                                   └──────────────────────────────────────────────────┘
        │                                                                                                    │                                                                                                                       
        │                                                                                                    │                                                                                                                       
        │                                                                                                    ▼                                                                                                                       
        │                                                                ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─                                                                                     
        │                                                                  Reps                                       ┌──────────────────────┐  │                                                                                    
        │                                                                │ [client/shared/components/reps/reps.js]    │   ObjectInspector    │                                                                                       
        │                                                                                                             └──────────────────────┘  │                                                                                    
        │                                                                │                                                        │                                                                                                  
        │                                                                                                                         ▼             │                                                                                    
        │                                                                │                                            ┌──────────────────────┐                                                                                       
        │                                                                                                             │ ObjectInspectorItem  │  │                                                                                    
        │                                                                │                                            └──────────────────────┘                                                                                       
        └───────────────────────────────────────────────────────────────▶                                                         │             │                                                                                    
                                                                         │                                                        ▼                                                                                                  
                                                                                                                      ┌──────────────────────┐  │                                                                                    
                                                                         │                                         ┌─▶│         Rep          │                                                                                       
                                                                                                                   │  └──────────────────────┘  │                                                                                    
                                                                         │                                         │              │                                                                                                  
                                                                                                                   │              │             │                                                                                    
                                                                         │                                         └──────────────┘                                                                                                  
                                                                          ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘                                                                                                                                                         
  </pre>
</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

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.