gecko-dev/devtools/client/webconsole
Cosmin Sabou 7b214fd81a Backed out 6 changesets (bug 1518999) for geckoview failures on scrollToVerticalOnZoomedContentAuto.
Backed out changeset 10bf1552e301 (bug 1518999)
Backed out changeset e62cd63e3595 (bug 1518999)
Backed out changeset 1bf0b02bb0e0 (bug 1518999)
Backed out changeset 2203a9c52afa (bug 1518999)
Backed out changeset 10f07ca7a246 (bug 1518999)
Backed out changeset b90cf6b54c09 (bug 1518999)
2020-08-25 01:02:36 +03:00
..
actions
components Bug 1658460 - Swap collapse and block icons for blocked network message. r=nchevobbe 2020-08-17 07:15:37 +00:00
enhancers Bug 1629890 - Use Front/Actor::isDestroyed to replace actorID checks r=nchevobbe 2020-08-12 11:33:44 +00:00
middleware
reducers Bug 1656825 - Fix duplicate calls to lazyRequireGetter r=nchevobbe 2020-08-03 07:53:50 +00:00
selectors Bug 1656825 - Fix duplicate calls to lazyRequireGetter r=nchevobbe 2020-08-03 07:53:50 +00:00
test Backed out 6 changesets (bug 1518999) for geckoview failures on scrollToVerticalOnZoomedContentAuto. 2020-08-25 01:02:36 +03:00
utils
.babelrc
browser-console-manager.js
browser-console.js Bug 1657310 - Attach target and thread from TargetList. r=jdescottes,ochameau. 2020-08-21 09:22:48 +00:00
commands.js
constants.js
index.html
moz.build
panel.js
README.md
service-container.js
store.js
types.js
utils.js
webconsole-connection-proxy.js
webconsole-ui.js Bug 1657310 - Attach target and thread from TargetList. r=jdescottes,ochameau. 2020-08-21 09:22:48 +00:00
webconsole-wrapper.js
webconsole.js Bug 1658724 - Don't start the parser worker if it's not needed when evaluating an expression in the console. r=jdescottes. DONTBUILD 2020-08-17 13:22:51 +00:00

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 about it on MDN 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 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 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:

{
  // 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