DoKit For Web 前端日志组件（Console）原理与使用指南

开发工具移动开发测试性能测试【免费下载链接】DoKit一款面向泛前端产品研发全生命周期的效率平台。项目地址https://gitcode.com/gh_mirrors/do/DoKit点击查看免费下载导读本指南围绕 DoKit 开源仓库中 Web 端web-independent包的文档展开聚焦于其中唯一被明确列出的基础插件——Console基于 Web 的日志组件。文章将以该文档为骨架结合 Web/packages/web/src/plugins/console 下的完整源码实现从日志捕获原理、类型体系、界面呈现、命令执行到构建接入逐层拆解其工作机制帮助你理解 DoKit For Web 如何在任意网页中以无侵入方式接管console、聚合前端日志并提供类 DevTools 的调试面板从而在自己的业务页面中复用这套能力。一、定位Dokit For Web 与 web-independent 包仓库中的 Web/packages/web-independent/README.md 是dokit/web-independent包的说明文档全文将 Web 端能力归纳为若干基础插件其中首要介绍的即为 Console 插件Console基于 Web 的日志组件从包配置 Web/packages/web-independent/package.json 可以看到dokit/web-independent是 Dokit Web 的主入口包description: Dokit Web Main Entry对外发布产物为dist/dokit.jsIIFE 格式可直接通过script引入依赖dokit/web-core与dokit/web-utils两个本地核心包。包的入口 Web/packages/web-independent/src/index.js 只有寥寥数行却完成了整个 SDK 的挂载import { Dokit } from dokit/web-core-independent import { Features } from ../../web/src/feature /** * 0.0.3 alpha 3 * TODO 全局注册 Dokit */ window.Dokit new Dokit({ features: Features, });其核心动作有三从dokit/web-core引入Dokit类从 Web/packages/web/src/feature.js 引入注册了全部插件的Features配置以features选项实例化Dokit并把实例挂到window.Dokit上实现全局注册源码注释中的 TODO 即指这一全局化动作从代码结构看已完成。而 Console 插件正是 Web/packages/web/src/feature.js 中BasicFeatures常用工具列表的第一项与 AppInfo、Resource、Network、Storage 等插件并列。因此可以说Console 是 DoKit For Web 默认能力集中最基础、最先被加载的调试组件之一。二、插件模型RouterPlugin 与生命周期在深入 Console 之前需要先理解 DoKit For Web 的插件基座。核心包 Web/packages/core/src/common/js/feature.js 定义了插件抽象BasePlugin基类统一承载name、nameZh、icon、component四个描述字段以及load()、unload()、productReady()三个生命周期方法RouterPlugin基于路由容器的插件进入插件页时路由跳转IndependPlugin独立容器插件不依赖路由直接叠加到页面顶层。Console 插件在 Web/packages/web/src/plugins/console/index.js 中被定义为RouterPluginimport Console from ./main.vue import { overrideConsole, restoreConsole } from ./js/console import { getGlobalData, RouterPlugin } from dokit/web-core export default new RouterPlugin({ name: console, nameZh: 日志, component: Console, icon: https://pt-starimg.didistatic.com/static/starimg/img/PbNXVyzTbq1618997544543.png, onLoad() { overrideConsole(({ name, type, value }) { let state getGlobalData(); state.logList state.logList || []; state.logList.push({ type: type, name: name, value: value }); }); }, onUnload() { restoreConsole() } })生命周期由核心包 Web/packages/core/src/common/js/lifecycle.js 统一驱动applyLifecyle会遍历所有 feature 分组对每个插件的load/unload/productReady钩子依次调用。对应关系如下钩子触发时机Console 插件的行为onLoadDokit 实例化时new Dokit(...)即调用调用overrideConsole开始接管日志onUnload插件卸载调用restoreConsole恢复原始console方法onProductReadysetProductId()之后未使用默认 noop也就是说Console 插件不是进入面板才生效而是 Dokit 一启动就全局接管 console 并持续收集日志日志被写入核心 Store 的logList数组中见 Web/packages/core/src/store/index.js 中getGlobalData的实现供插件页面实时读取渲染。三、日志捕获原理overrideConsole 与 restoreConsoleConsole 组件基于 Web 的日志组件定位的底层实现是 Web/packages/web/src/plugins/console/js/console.js 中的两个导出函数。3.1 覆盖阶段overrideConsoleexport const CONSOLE_METHODS [log, info, warn, error] export const overrideConsole function (callback) { const winConsole window.console CONSOLE_METHODS.forEach((name) { let origin (origConsole[name] noop) if (winConsole[name]) { origin origConsole[name] winConsole[name].bind(winConsole) } winConsole[name] (...args) { callback({ name: name, type: ConsoleLogMap[name], value: args }) origin(...args) } }) }机制要点仅拦截log、info、warn、error四个高频方法不干扰console.debug、console.table等先用bind(winConsole)保存原始方法到origConsole缓存避免丢失this上下文替换后的新方法在调用回调上报日志后仍会调用原始方法因此页面原有的 console 输出不受影响——这就是无侵入捕获回调收到的value是完整的参数数组args因此多参数调用如console.log(a, obj)也能被完整保留。3.2 恢复阶段restoreConsoleexport const restoreConsole function () { const winConsole window.console CONSOLE_METHODS.forEach((name) { winConsole[name] origConsole[name] }) }将缓存的原始方法逐一还原保证卸载后页面 console 行为与接入前完全一致符合可插拔设计。四、日志类型体系LogMap / LogEnum / ConsoleLogMapWeb/packages/web/src/plugins/console/js/console.js 顶部定义了一套完整的日志类型映射这是文档中 TODO支持多种类型的日志对应的数据基础export const LogMap { 0: All, 1: Log, 2: Info, 3: Warn, 4: Error } export const LogEnum { ALL: 0, LOG: 1, INFO: 2, WARN: 3, ERROR: 4 } export const ConsoleLogMap { log: LogEnum.LOG, info: LogEnum.INFO, warn: LogEnum.WARN, error: LogEnum.ERROR }三者分工明确常量作用说明LogMap数字 → 名称用于渲染 Tab 文案All / Log / Info / Warn / ErrorLogEnum枚举常量供代码中以语义化方式引用各类型ConsoleLogMapconsole 方法名 → 枚举捕获回调中把name转成type数字LogTabs由LogMap派生export const LogTabs Object.keys(LogMap).map(key { return { type: parseInt(key), name: LogMap[key] } })插件页面 Web/packages/web/src/plugins/console/main.vue 直接消费这些定义Tab 组件渲染LogTabs默认选中LogEnum.ALLcurLogList计算属性在非 ALL 状态下按log.type过滤。四种日志类型与筛选能力在源码中均已落地对应文档 TODO 中的第一项。五、日志界面呈现与对象展开5.1 界面结构main.vue 的模板将 Console 面板拆为三部分console-tap顶部类型筛选 Tabconsole-tap.vue通过changeTap事件通知父组件切换类型log-container日志列表log-container.vue遍历curLogList逐条渲染log-itemoperation-command底部命令执行区op-command.vue。5.2 日志条目与对象展开单条日志由 log-item.vue 渲染。它根据日志类型做差异化展示log/info识别每个参数的数据类型getDataType除 Number、String、Boolean、Undefined、Null 外均渲染类型标签 结构化文本getDataStructureStrerror/warn若参数带stack直接以pre-wrap样式输出完整的错误堆栈样式层面按info浅蓝、warn浅黄、error浅红底色 红色文字做视觉区分。对象类型展开正是文档 TODO支持对象类型展开对应的能力在 log-detail.vue 中实现点击日志预览可展开明细明细项对 Object/Array 递归渲染组件自引用自身Detail支持逐层展开折叠值展示为index: value形式可折叠项带三角形指示符。从源码结构看该 TODO 项已有完整实现。六、简易 JavaScript 命令执行Console 面板底部提供命令行输入框对应 op-command.vue输入命令后点击 Excute 按钮执行结果通过console.log回灌到日志列表实现面板内即时求值的类 DevTools 体验。命令求值由 console.js 中的excuteScript完成export const excuteScript function (command) { let ret try { ret eval.call(window, (${command})) } catch (e) { ret eval.call(window, command) } return ret }其策略为先尝试将输入包裹成表达式(${command})求值适用于对象字面量、JSON 等失败则退化为直接求值适用于语句、变量访问等并统一以window为执行上下文。注意此能力面向调试场景执行任意 JS 存在安全风险仅在可信的开发/调试环境开启。七、构建与接入方式7.1 构建产物Web/packages/web-independent/rollup.config.js 负责将../web/src/index.js打包为dist/dokit.js输出格式为IIFE全局变量名为dokit因此页面可直接以script标签引入插件链包含rollup-plugin-vue编译.vue单文件组件、postcss处理 less、node-resolvecommonjs、rollup/plugin-alias把common指向../web/src/common生产构建NODE_ENVproduction追加terser压缩同时通过replace注入process.env.NODE_ENV等环境常量。执行构建包内 scripts见 package.jsonnpm run build # 生产构建含压缩 npm run dev # rollup -wc 监听模式开发构建7.2 页面接入示例仓库中的 Web/playground/independent.html 即一个最小可用的接入示例完整展示了接入三步曲script src../packages/web-independent/dist/dokit.js/script script Dokit.setProductId(749a0600b5e48dd77cf8ee680be7b1b7) // Dokit.startMultiControl(ws://192.168.0.102:8000/proxy/multicontrol/qwe, host) /script引入dist/dokit.js调用Dokit.setProductId(...)触发onProductReady生命周期核心实现见 Web/packages/core/src/index.jssetProductId会写入 Store 并触发onProductReady可选startMultiControl(url, role)开启多机同控host/client角色stopMultiControl()断开。接入后页面中任何console.log/info/warn/error都会自动被 Console 插件捕获并可在面板中按类型筛选查看。八、小结回到 Web/packages/web-independent/README.md 的原始骨架可以将其一句话概括为基于 Web 的日志组件的 Console 插件在仓库源码中拥有完整闭环捕获层console.js 的overrideConsole/restoreConsole以保存-替换-恢复模式无侵入接管console类型层LogMap/LogEnum/ConsoleLogMap支撑多类型日志Log/Info/Warn/Error与 Tab 筛选对应文档 TODO 第一项展示层log-item.vue 与 log-detail.vue 实现错误堆栈渲染与对象/数组递归展开对应文档 TODO 第二项交互层op-command.vue 提供命令执行入口生命周期层插件基座 feature.js 与 lifecycle.js 保证加载与卸载的对称性。若要在自己的业务页面中启用这一能力只需按web-independent包的构建产物引入并实例化Dokit即可获得一个随页面运行的、可筛选、可展开对象、可执行命令的前端调试日志面板。赞分享开发工具移动开发测试性能测试【免费下载链接】DoKit一款面向泛前端产品研发全生命周期的效率平台。项目地址https://gitcode.com/gh_mirrors/do/DoKit点击查看免费下载相关推荐CuraEngine插件开发实战如何为3D打印引擎扩展自定义功能CuraEngine插件开发实战如何为3D打印引擎扩展自定义功能 CuraEngine是Ultimaker开发的一款强大、快速且健壮的3D打印切片引擎能够将后端图形学Pinpoint Web 前端富日期时间选择器Rich Datetime Picker组件使用指南Pinpoint Web 前端富日期时间选择器Rich Datetime Picker组件使用指南 导读 本文讲解 Pinpoint 项目 Web 前端后端可观测性APM链路追踪微服务Graylog 2 Web Interface 前端分页组件 Pagination 使用指南Graylog 2 Web Interface 前端分页组件 Pagination 使用指南 导读 本指南以 Graylog2 Server 开源仓库中 Pag日志分析运维观测上一篇Google Spatial Media项目解析VR180视频格式技术详解下一篇TestProf 测试性能分析工具入门指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考