尧图网站建设 
ToolJet Inspector 完全指南查询结果、组件属性与全局变量的运行时视图3.0.0-LTS【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本篇指南基于 ToolJet 3.0.0-LTS 版本文档系统讲解 App Builder 中 Inspector 面板的六大分区Queries、Components、Globals、Variables、Page、Constants的用途、数据内容与使用方式并结合开源仓库中的前端源码说明 Inspector 数据是如何从 Zustand 状态仓库暴露、聚合并渲染到面板中的。读完本文后你可以熟练地用 Inspector 定位查询执行结果、排查变量作用域问题、验证全局变量取值并理解 ToolJet「属性编辑器 Inspector」与「运行时数据 Inspector」两套 Inspector 机制的区别与联系。Inspector 是什么ToolJet 的 Inspector 是用于查看应用各类元素相关数据的功能入口覆盖查询queries、组件components、全局变量global variables、页面相关变量page-related variables、用户自定义变量user-set variables以及常量constants。它本质上是 App Builder 中的一块「运行时数据视图」在编辑、预览或查看模式下把应用当前状态下各命名空间里的变量和对象以树形结构呈现出来供调试与验证使用。Inspector 面板的六大分区Inspector 面板按数据来源划分为 6 个主要分区Queries、Components、Globals、Variables、Page和Constants。各分区职责如下分区查看内容典型用途Queries已执行查询的详细信息检查查询返回的数据结构、验证参数取值Components画布上每个组件相关的属性排查组件属性绑定、确认组件当前状态Globals应用级全局信息查看当前用户、主题、环境、运行模式等Variables用户自定义变量键值对验证事件处理器 / 查询中设置的自定义变量Page页面专属属性与变量确认页面变量只在所属页面可见Constants预定义的固定值核对 API Key、Token 等常量是否配置正确QueriesQueries 分区用于查看查询的具体信息包括执行结果与相关数据。需要注意一个关键前提只有查询被执行或触发之后相关数据才会在这里可见。也就是说如果在编辑状态下从未运行过某条查询Inspector 中不会展示其结果。这一行为与 ToolJet 的查询执行机制一致查询结果存储在运行时状态中Inspector 只是对这些状态数据的只读投影。ComponentsComponents 分区列出画布上已添加组件的属性与取值。通过它可以分析每个组件当前生效的属性帮助理解「组件在应用中的实际表现由哪些属性驱动」。当组件属性绑定了查询结果或变量Fx 表达式时结合 Queries 分区与 Components 分区可以完成一次完整的取值链路核对。GlobalsGlobals 分区提供与整个应用相关的全局信息。具体包含以下数据currentUser当前登录用户的详情包括email、firstName、lastNamegroups当前登录用户所属的分组名称列表。其中all_users是所有人都包含在内的默认分组theme当前正在使用的主题名称urlparams应用 URL 参数的详情environment包含两部分——id自动生成的唯一标识与name当前应用版本所处环境的名称modes指示应用当前处于edit、preview还是view模式。Edit 用于编辑应用preview 对应点击 App Builder 中的预览按钮时的状态view 则是应用通过共享链接打开时的状态。所有全局变量都可以在 ToolJet 应用的任何位置被访问。官方文档中还提供了利用currentUser等全局变量的用例示例见 Use Inspector 指南 中引用的 access-currentuser 用例。VariablesVariables 分区以键值对key-value形式展示用户自定义变量。这些变量通常通过事件处理器或查询设置在整个应用范围内可访问。设置变量的途径包括事件处理器Set Variable 动作或 Run JS 中的 JavaScript 代码。PagePage 分区展示页面专属属性如页面名称、handle 以及页面变量。与 Variables 分区的关键区别在于作用域页面变量仅在其所属页面内可用不能跨页面访问。在排查「变量明明设置了但在另一个页面取不到值」这类问题时应优先到 Page 分区确认该变量是否被声明为页面级变量。ConstantsConstants 分区存放预定义的固定值通常是 Token、密钥、API Key 之类的敏感常量用于在整个应用中保持一致性并方便统一更新。常量在应用运行期间不可被修改与 Variables运行时可被事件/查询改写形成互补敏感且不变化的配置放 Constants运行期会变化的数据放 Variables。版本限制说明environment与mode这两个全局变量仅在ToolJet Enterprise Edition v2.2.3 及以上版本中可用。社区版或更低版本的企业版中不会出现这两个字段。源码视角Inspector 数据从哪来在仓库前端源码中「Inspector」一词同时对应两套 UI理解二者区别有助于正确使用该功能1. 左侧边栏的运行时数据 Inspector本文主体左侧边栏的 Inspector 面板实现位于 LeftSidebarInspector.jsx。从源码结构看该组件通过 Zustand store 的getAllExposedValues()一次性取出六个命名空间的「已暴露值」const exposedComponentsVariables useStore((state) state.getAllExposedValues().components, shallow); const exposedQueries useStore((state) state.getAllExposedValues().queries || {}, shallow); const exposedVariables useStore((state) state.getAllExposedValues().variables || {}, shallow); const exposedConstants useStore((state) state.getAllExposedValues().constants || {}, shallow); const exposedPageVariables useStore((state) state.getAllExposedValues().page || {}, shallow); const exposedGlobalVariables useStore((state) state.getAllExposedValues().globals || {}, shallow);随后每个命名空间的数据分别经过formatInspectorComponentData、formatInspectorQueryData、formatInspectorDataMisc等工具函数格式化并组装成名称为 Queries、Globals、Variables、Page、Constants 等分组与文档所述六大分区一一对应。这段实现印证了文档中的两点描述分区与命名空间一一对应——Variables、Page、Globals、Constants 分别来自exposedValues的不同 key这正是「页面变量不能跨页访问、全局变量随处可访问」在数据层的体现Queries 数据依赖执行结果——exposedQueries取自运行时状态中查询执行后写入的内容查询未执行时对应键为空面板自然无数据展示。同目录下的 InspectorHeader.jsx、Node.jsx 与 useCallbackActions.js 则负责面板头部、树节点渲染及交互动作如节点定位、复制值等相关格式化逻辑集中在 utils.js。2. 右侧属性 Inspector组件配置面板右侧边栏的 Inspector.jsx 是另一个「Inspector」——组件属性编辑面板。选中画布上某个组件后它会呈现该组件的可编辑属性核心结构包括Properties / Styles 两个标签页renderTabs中定义头部操作菜单源码中INSPECTOR_HEADER_OPTIONS定义了 Inspect、Rename、Duplicate、Component permission、Delete 五个动作。其中Inspect动作会调用setComponentToInspect(component.component.name)把当前组件送入左侧运行时 Inspector 进行查看——这恰好是两套 Inspector 之间的联动点属性面板中的 Inspect 按钮可以直接跳转到数据面板中该组件的暴露值按组件类型分发渲染源码底部的GetAccordion组件根据componentName把 Table、Tabs、Chart、Form、Modal、DatetimePickerV2、Steps、Navigation、TreeSelect 等 40 余种组件路由到各自的专属配置面板其余组件走DefaultComponent通用渲染。这意味着文档中「Components 分区可检查每个组件的属性」背后实际是一套按组件元数据definition 中的 properties/styles 分组动态生成表单的机制。相关的状态切片 inspectorSlice.js 管理着setComponentToInspect等 Inspector 相关状态而urlparams等全局数据来源可追溯到 currentStateStore.js与 Globals 分区展示的urlparams字段对应。实战使用建议结合文档与源码日常开发中推荐以下 Inspector 使用套路验证查询链路先执行查询到 Queries 分区确认返回结构再到 Components 分区查看消费该结果的组件属性确认 Fx 表达式取值正确排查变量作用域跨页面取不到变量时先判断它出现在 Variables全局还是 Page页面级分区作用域错误是最常见原因核对环境信息企业版用户可借助 Globals 中的environment与modes判断当前调试所处环境与模式edit/preview/view避免把「共享链接下的 view 模式行为」误判为应用缺陷敏感值管理API Key、Token 等固定值统一放入 Constants 分区核对配置避免散落在多条查询中难以维护。参考路径概念文档inspector.md操作指南use-inspector.md运行时数据面板LeftSidebarInspector.jsx组件属性面板Inspector.jsxINSPECTOR_HEADER_OPTIONS见第 62-96 行GetAccordion组件类型分发见第 896-979 行状态切片inspectorSlice.js预览图inspector-preview.png、use-inspector-preview.png【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ToolJet Inspector 完全指南：查询结果、组件属性与全局变量的运行时视图（3.0.0-LTS）
ToolJet Inspector 完全指南查询结果、组件属性与全局变量的运行时视图3.0.0-LTS【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet本篇指南基于 ToolJet 3.0.0-LTS 版本文档系统讲解 App Builder 中 Inspector 面板的六大分区Queries、Components、Globals、Variables、Page、Constants的用途、数据内容与使用方式并结合开源仓库中的前端源码说明 Inspector 数据是如何从 Zustand 状态仓库暴露、聚合并渲染到面板中的。读完本文后你可以熟练地用 Inspector 定位查询执行结果、排查变量作用域问题、验证全局变量取值并理解 ToolJet「属性编辑器 Inspector」与「运行时数据 Inspector」两套 Inspector 机制的区别与联系。Inspector 是什么ToolJet 的 Inspector 是用于查看应用各类元素相关数据的功能入口覆盖查询queries、组件components、全局变量global variables、页面相关变量page-related variables、用户自定义变量user-set variables以及常量constants。它本质上是 App Builder 中的一块「运行时数据视图」在编辑、预览或查看模式下把应用当前状态下各命名空间里的变量和对象以树形结构呈现出来供调试与验证使用。Inspector 面板的六大分区Inspector 面板按数据来源划分为 6 个主要分区Queries、Components、Globals、Variables、Page和Constants。各分区职责如下分区查看内容典型用途Queries已执行查询的详细信息检查查询返回的数据结构、验证参数取值Components画布上每个组件相关的属性排查组件属性绑定、确认组件当前状态Globals应用级全局信息查看当前用户、主题、环境、运行模式等Variables用户自定义变量键值对验证事件处理器 / 查询中设置的自定义变量Page页面专属属性与变量确认页面变量只在所属页面可见Constants预定义的固定值核对 API Key、Token 等常量是否配置正确QueriesQueries 分区用于查看查询的具体信息包括执行结果与相关数据。需要注意一个关键前提只有查询被执行或触发之后相关数据才会在这里可见。也就是说如果在编辑状态下从未运行过某条查询Inspector 中不会展示其结果。这一行为与 ToolJet 的查询执行机制一致查询结果存储在运行时状态中Inspector 只是对这些状态数据的只读投影。ComponentsComponents 分区列出画布上已添加组件的属性与取值。通过它可以分析每个组件当前生效的属性帮助理解「组件在应用中的实际表现由哪些属性驱动」。当组件属性绑定了查询结果或变量Fx 表达式时结合 Queries 分区与 Components 分区可以完成一次完整的取值链路核对。GlobalsGlobals 分区提供与整个应用相关的全局信息。具体包含以下数据currentUser当前登录用户的详情包括email、firstName、lastNamegroups当前登录用户所属的分组名称列表。其中all_users是所有人都包含在内的默认分组theme当前正在使用的主题名称urlparams应用 URL 参数的详情environment包含两部分——id自动生成的唯一标识与name当前应用版本所处环境的名称modes指示应用当前处于edit、preview还是view模式。Edit 用于编辑应用preview 对应点击 App Builder 中的预览按钮时的状态view 则是应用通过共享链接打开时的状态。所有全局变量都可以在 ToolJet 应用的任何位置被访问。官方文档中还提供了利用currentUser等全局变量的用例示例见 Use Inspector 指南 中引用的 access-currentuser 用例。VariablesVariables 分区以键值对key-value形式展示用户自定义变量。这些变量通常通过事件处理器或查询设置在整个应用范围内可访问。设置变量的途径包括事件处理器Set Variable 动作或 Run JS 中的 JavaScript 代码。PagePage 分区展示页面专属属性如页面名称、handle 以及页面变量。与 Variables 分区的关键区别在于作用域页面变量仅在其所属页面内可用不能跨页面访问。在排查「变量明明设置了但在另一个页面取不到值」这类问题时应优先到 Page 分区确认该变量是否被声明为页面级变量。ConstantsConstants 分区存放预定义的固定值通常是 Token、密钥、API Key 之类的敏感常量用于在整个应用中保持一致性并方便统一更新。常量在应用运行期间不可被修改与 Variables运行时可被事件/查询改写形成互补敏感且不变化的配置放 Constants运行期会变化的数据放 Variables。版本限制说明environment与mode这两个全局变量仅在ToolJet Enterprise Edition v2.2.3 及以上版本中可用。社区版或更低版本的企业版中不会出现这两个字段。源码视角Inspector 数据从哪来在仓库前端源码中「Inspector」一词同时对应两套 UI理解二者区别有助于正确使用该功能1. 左侧边栏的运行时数据 Inspector本文主体左侧边栏的 Inspector 面板实现位于 LeftSidebarInspector.jsx。从源码结构看该组件通过 Zustand store 的getAllExposedValues()一次性取出六个命名空间的「已暴露值」const exposedComponentsVariables useStore((state) state.getAllExposedValues().components, shallow); const exposedQueries useStore((state) state.getAllExposedValues().queries || {}, shallow); const exposedVariables useStore((state) state.getAllExposedValues().variables || {}, shallow); const exposedConstants useStore((state) state.getAllExposedValues().constants || {}, shallow); const exposedPageVariables useStore((state) state.getAllExposedValues().page || {}, shallow); const exposedGlobalVariables useStore((state) state.getAllExposedValues().globals || {}, shallow);随后每个命名空间的数据分别经过formatInspectorComponentData、formatInspectorQueryData、formatInspectorDataMisc等工具函数格式化并组装成名称为 Queries、Globals、Variables、Page、Constants 等分组与文档所述六大分区一一对应。这段实现印证了文档中的两点描述分区与命名空间一一对应——Variables、Page、Globals、Constants 分别来自exposedValues的不同 key这正是「页面变量不能跨页访问、全局变量随处可访问」在数据层的体现Queries 数据依赖执行结果——exposedQueries取自运行时状态中查询执行后写入的内容查询未执行时对应键为空面板自然无数据展示。同目录下的 InspectorHeader.jsx、Node.jsx 与 useCallbackActions.js 则负责面板头部、树节点渲染及交互动作如节点定位、复制值等相关格式化逻辑集中在 utils.js。2. 右侧属性 Inspector组件配置面板右侧边栏的 Inspector.jsx 是另一个「Inspector」——组件属性编辑面板。选中画布上某个组件后它会呈现该组件的可编辑属性核心结构包括Properties / Styles 两个标签页renderTabs中定义头部操作菜单源码中INSPECTOR_HEADER_OPTIONS定义了 Inspect、Rename、Duplicate、Component permission、Delete 五个动作。其中Inspect动作会调用setComponentToInspect(component.component.name)把当前组件送入左侧运行时 Inspector 进行查看——这恰好是两套 Inspector 之间的联动点属性面板中的 Inspect 按钮可以直接跳转到数据面板中该组件的暴露值按组件类型分发渲染源码底部的GetAccordion组件根据componentName把 Table、Tabs、Chart、Form、Modal、DatetimePickerV2、Steps、Navigation、TreeSelect 等 40 余种组件路由到各自的专属配置面板其余组件走DefaultComponent通用渲染。这意味着文档中「Components 分区可检查每个组件的属性」背后实际是一套按组件元数据definition 中的 properties/styles 分组动态生成表单的机制。相关的状态切片 inspectorSlice.js 管理着setComponentToInspect等 Inspector 相关状态而urlparams等全局数据来源可追溯到 currentStateStore.js与 Globals 分区展示的urlparams字段对应。实战使用建议结合文档与源码日常开发中推荐以下 Inspector 使用套路验证查询链路先执行查询到 Queries 分区确认返回结构再到 Components 分区查看消费该结果的组件属性确认 Fx 表达式取值正确排查变量作用域跨页面取不到变量时先判断它出现在 Variables全局还是 Page页面级分区作用域错误是最常见原因核对环境信息企业版用户可借助 Globals 中的environment与modes判断当前调试所处环境与模式edit/preview/view避免把「共享链接下的 view 模式行为」误判为应用缺陷敏感值管理API Key、Token 等固定值统一放入 Constants 分区核对配置避免散落在多条查询中难以维护。参考路径概念文档inspector.md操作指南use-inspector.md运行时数据面板LeftSidebarInspector.jsx组件属性面板Inspector.jsxINSPECTOR_HEADER_OPTIONS见第 62-96 行GetAccordion组件类型分发见第 896-979 行状态切片inspectorSlice.js预览图inspector-preview.png、use-inspector-preview.png【免费下载链接】ToolJetOpen-source foundation of ToolJet AI - the enterprise app generation platform for internal tools, dashboards, business applications, workflows and AI agents. Build visually, from a prompt, or from Claude Code, Codex and Cursor over MCP 项目地址: https://gitcode.com/GitHub_Trending/to/ToolJet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考