控制台工具架构

控制台面板负责渲染来自当前页面的所有日志。

架构

控制台面板（客户端）的内部架构如下图所示。

flowchart TB DevTools["DevTools<br/>[client/framework/devtools.js]"] -- "openBrowserConsole() 或<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;

组件

控制台面板 UI 构建在 React 之上。它在 components 目录中定义了一组 React 组件。React 架构如下图所示。

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.js"] --> 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]"]

我们还使用了 WebConsole 中的几个外部组件

  • ObjectInspector/Rep：用于在控制台输出中显示变量，并在变量不是基本类型时处理展开变量。

  • Frame：用于显示消息的位置。

  • SmartTrace：用于显示消息和错误的堆栈跟踪。

  • TabboxPanel：用于渲染网络消息详情。这直接使用了 Netmonitor 中的组件，因此我们在显示请求内部信息方面保持一致。

操作

控制台面板实现了一组分为多个组的操作。

  • 过滤器 与内容过滤相关的操作。

  • 消息 与面板中渲染的消息列表相关的操作。

  • UI 与 UI 状态相关的操作。

状态

控制台面板通过 Redux 管理应用程序状态。

以下 reducer 定义了面板状态

  • reducers/filters.js 面板过滤器的状态。这些过滤器可以通过面板工具栏设置（例如 error、info、log、css 等）。

  • reducers/messages.js 面板中渲染的所有消息的状态。

  • reducers/prefs.js 与控制台面板关联的偏好设置（例如 logLimit）。

  • reducers/ui.js 与 UI 相关的状态（有时也称为表示状态）。此状态包含过滤器栏的状态（可见/隐藏）、时间戳的状态（可见/隐藏）等。