Console 日志记录器捕获所有 console 输出（console.log、console.warn、console.error、console.info），并直接在页面上的浮动面板中显示。无需打开浏览器 DevTools，即可实时查看 JavaScript 错误、调试消息和警告。消息按类型进行颜色编码，错误信息还包含时间戳和堆栈跟踪。
仅为查看 console 输出而打开浏览器 DevTools 会占用宝贵的屏幕空间 —— 在小屏幕设备上或需要在监控日志的同时查看完整页面时尤为明显。Console 日志记录器提供了一种轻量级替代方案：一个浮动面板，实时显示所有 console 输出并覆盖在页面上。该面板可捕获 console.log、console.warn、console.error、console.info 以及带有完整堆栈跟踪的未捕获异常。消息按颜色编码（错误显示为红色，警告显示为黄色，info 显示为蓝色，普通日志显示为白色/灰色），并附有时间戳以追踪事件发生时间。筛选按钮支持仅显示特定类型的消息 —— 调试崩溃时仅显示错误，排查弃用警告时仅显示 warnings。面板支持拖拽、调整大小，并具有半透明效果，不会遮挡太多页面内容。
Console 消息在记录时实时显示。可查看页面初始化日志、API 响应处理、用户交互事件和错误消息 —— 所有内容均在浮动面板中实时流式呈现。
错误显示为红色，警告显示为琥珀色/黄色，info 显示为蓝色，普通日志显示为白色/灰色。仅凭颜色即可立即区分严重错误与常规日志消息。
JavaScript 错误包含完整的堆栈跟踪，显示文件名、函数名和行号。点击文件引用即可精确定位错误来源，无需打开 DevTools。
顶部的筛选按钮支持显示/隐藏特定类型的消息：全部、仅错误、仅警告、仅 info、仅普通日志。每个筛选器上的计数徽章显示该类型的消息数量。
每条消息均显示记录时间（HH:MM:SS 格式）。可追踪事件序列、识别性能问题（API 调用与响应之间的时间间隔），以及将消息与用户操作关联对应。
清除所有消息以重新开始，或在与页面交互时持续累积消息。面板显示消息总数，不需要时可最小化。
需要在保持完整页面可见的同时查看 console 输出？Console 日志记录器让你无需占用 DevTools 面板的屏幕空间即可监控日志。在小屏幕设备或演示场合下尤为实用。
如果 JavaScript 记录了 API 响应，Console 日志记录器将实时显示这些内容。无需在页面和 DevTools 之间来回切换即可查看请求/响应数据。
部分 JavaScript 错误会静默失败 —— 没有可见的 UI 变化，但 console 中存在错误记录。Console 日志记录器将这些错误呈现在页面上，让你在正常浏览时也能及时发现。
在现场演示时，将 Console 日志记录器面板保持在角落可见。如果出现异常，可立即看到错误消息，无需中断演示去打开 DevTools。
第三方脚本（数据分析、聊天插件、广告网络）经常抛出错误或警告。Console 日志记录器可捕获这些信息，便于监控外部依赖项的健康状态。
打开 DevSuite Pro 浮动 dock，点击 Console 日志记录器图标。浮动面板随即出现，立即开始捕获 console 输出。
正常使用页面 —— 点击按钮、浏览页面、提交表单。页面 JavaScript 记录的 console 消息将实时出现在面板中。
使用筛选按钮仅显示错误、警告或普通日志。计数徽章显示每种类型对应的消息数量。
对于错误消息，展开堆栈跟踪即可查看错误发生的文件和行号，从而定位问题根源。
点击「清除」重置面板，或停用工具将其关闭。页面上不会留下任何痕迹。
