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
|
# WebConsole
The WebConsole (webconsole) shows you all the console API calls made by scripts and alerts
you when javascript errors are thrown by a script.
It can also display network logs, and you can evaluate expressions using the console
input, a.k.a. JsTerm. You can read [more](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) about it
to learn all the features and how to use the tool.
## Run WebConsole
If you want to build the WebConsole inside of the DevTools toolbox (Firefox Devtools Panels),
follow the [simple Firefox build](https://firefox-source-docs.mozilla.org/devtools/getting-started/build.html)
documentation. Start your compiled firefox and open the Firefox developer tool, you can
then see the WebConsole tab.
## Code Structure
Top level files are used to launch the WebConsole inside of the DevTools toolbox.
The main files used to run the WebConsole are:
* `main.js` called by devtools toolbox to launch the WebConsole panel.
* `index.html` panel UI and launch scripts.
### UI
The WebConsole UI is built using [React](https://firefox-source-docs.mozilla.org/devtools/frontend/react.html)
components (in `components/`).
The React application is rendered from `webconsole-wrapper.js`.
It contains 4 top components:
* **ConsoleOutput** (in `ConsoleOutput.js`) is the component where messages are rendered.
* **FilterBar** (in `FilterBar.js`) is the component for the filter bars (filter input and toggle buttons).
* **SideBar** (in `SideBar.js`) is the component that render the sidebar where objects can be placed in.
* **JsTerm** (in `JsTerm.js`) is the component that render the console input.
We prefer stateless component (defined by function) instead of stateful component
(defined by class) unless the component has to maintain its internal state.
### State
Besides the UI, the WebConsole manages the app state via [Redux].
The following locations define the app state:
* `src/constants.js` constants used across the tool including action and event names.
* `src/actions/` for all actions that change the state.
* `src/reducers/` for all reducers that change the state.
* `src/selectors/` functions that return a formatted version of parts of the app state.
The redux state is a plain javascript object with the following properties:
```js
{
// State of the filter input and toggle buttons
filters,
// State of the input history
history,
// Console messages data and state (hidden, expanded, groups, …)
messages,
// State of notifications displayed on the output (e.g. self-XSS warning message)
notifications,
// Preferences (persist message, message limit, …)
prefs,
// Interface state (filter bar visible, sidebar visible, …)
ui,
}
```
### Tests
[See test/README.md](test/README.md)
|
