我们发布 了grapesjs-devtools，一款开源（MIT）插件，为编辑器添加了可停靠的开发者面板。这个想法很简单：就像你浏览器的开发工具一样，但你不是检查页面本身，而是检查编辑器本身的内部状态。在macOS上点击Ctrl+Shift+DCMD+Shift+D，整个编辑器就打开了：组件树、应用样式、事件流、REPL，甚至还有一个AI助手，能用代码示例回答GrapesJS的问题。
在网页首页直接切换标准网页预设和GrapesJS Studio，打开快捷键面板，随意探索。
为什么会这样
GrapesJS 是一个强大的工具，但它的大部分内部状态是不可见的。组件、特性、CSS规则、管理器、事件总线 –都存在于Backbone模型中，当出现问题时，你最终只能手动从浏览器控制台挖掘出来。任何写过插件或自定义组件的人都知道循环：订阅事件，记录负载，调整，取消订阅，重复。
DevTools消除了这种重复劳动。所有以前需要手动挖掘的内容现在都能在一个面板中实时看到。
里面是什么
面板由模块组成，每个模块都可以在配置中禁用，如果你不需要的话。
组件 是一个带有双向选择功能的实时组件树，与画布同步。点击树中的节点，组件会在画布上被选中，反之亦然。属性和特征可以在面板中直接编辑，任何组件都可以复制成 JSON。
样式显示 哪些 CSS 规则实际适用于所选元素，通过删除级联覆盖属性，并通过内联编辑完成。此外，还支持全项目规则搜索和死规则扫描器，能找到完全不匹配的规则。
事件 是通过单一监听器记录每个编辑器事件的日志：组和文本过滤、暂停、频率统计以及每个事件的有效载荷检查。列表是虚拟化的，所以即使是嘈杂的项目也不会冻结面板。
在 REPL 控制台上设置一个带有editor$0（选定组件）的范围、历史、自动editor.补全和现成的片段。不再为了“问”编辑器而一直开着浏览器开发工具。
存储 项目数据的JSON树、快照间的结构差异、导出/导入，以及带有语法高亮的实时HTML/CSS。
管理器 ：块、特征、选择器、设备和加载插件的概览。点击选择器后，直接跳转到样式模块中的筛选。
实时表现 指标（组件数量、CSS规则数量、编辑器监听者数量、撤销栈大小）、画布重渲染计时器，以及基于简单原理的泄漏检测器：先取一个基线，之后比较。
画布覆盖层：通过嵌套深度、选定元素的框模型、pointer-events画布主体切换和滚动选择，高亮所有组件。
快照捕捉 并恢复完整的项目状态（数据 + 选择 + 设备），支持导出/导入和可选的 localStorage 持久化功能。
人工智能助手
AI 标签值得单独一节。这不是“为了聊天而聊天”：助理理解编辑的语境。点击“选定元素”，点击UI的任意部分，比如面板、按钮、管理器，或者直接选择画布上的组件，然后问类似“我该如何在这里添加另一个按钮？”之类的问题。你会得到一个解释，还有一个现成的 GrapesJS 代码示例，用 Markdown 流式传输，并附带可复制的代码块。
支持Claude、ChatGPT和Gemini。默认情况下，请求直接从浏览器发出（开发时界面确实提醒了你），但生产环境有两种更智能的模式：
- 代理模式会指向你自己的端点，API 密钥永远不会离开你的服务器。浏览器会将提供商的本地请求体发送给你的代理，代理会添加密钥并将响应流回。最小代理实际上就是十几行Express，README里有个例子。
- 兼容OpenAI的后端 OpenRouter、Ollama、LM Studio、Together，以及任何其他网关。想要通过Ollama获得免费的本地助理？完成了。
成为编辑中的好客人
我们努力让开发者工具表现得像个有礼貌的客人：
- 没有泄漏。所有活动订阅都会通过一个单人
EditorBridge订阅，当座谈会关闭editor._events时，活动会回归基线。 - 懒惰。模块在打开第一个卡片时安装;计时器和RAF环路在停用时停止。
- 非侵入性。面板是一个
position: fixed叠加层，从不写入画布的iframe（唯一的例外是显式pointer-events切换）。 - 零运行时依赖。界面是纯DOM，大型列表是虚拟化的，树干中孩子们渲染得很懒，项目有1000+组件，保持响应。
在我们查看私有 API（Perf 监听器指标读取 Backbone 内部结构）时，它被隔离在try/catchIPF，降级到n/a面板中而非崩溃。
试试看
npm install grapesjs-devtools import grapesjs from 'grapesjs'; import devtools from 'grapesjs-devtools'; import 'grapesjs-devtools/dist/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [devtools], }); 兼容 GrapesJS>= 0.21.0。一切都可配置：底座位置（底部/右边/左边）、尺寸、主题（暗/亮/自动）、快捷键、模块。
面板也是可扩展的：自定义模块只是一个类mountdeactivatedestroy，会接收与 SEditorBridge相关的上下文以便安全订阅。