问题排查调试工具使用手册：https://doc.oinone.top/kai-fa-shi-jian/7484.html
调试工具在业务场景的使用-前端https://doc.oinone.top/shu-shi-oinone-xue-yuan/kai-fa-pai-cuo-ji-qiao/18412.html
调试工具在业务场景的使用-前端：https://doc.oinone.top/wen-ti-zhen-duan/17746.html
如何通过浏览器开发者工具提高调试效率https://doc.oinone.top/frontend/17130.html
Oinone社区 作者：shao原创文章，如若转载，请注明出处：https://doc.oinone.top/shu-shi-oinone-xue-yuan/19253.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
这篇文档主要介绍在业务场景中，使用调试工具解决后端问题的思路。 调试工具的使用见文档：问题排查调试工具使用手册 调试工具的页面内容介绍：Oinone平台可视化调试工具 例1：模型配置不存在 现象：点击详情报模型配置不存在错误 排查路径： 将报错请求复制到接口调试出，查看调试信息 在调试信息页面，可以看到全部堆栈，利用堆栈信息找报错问题。 可以看到执行了StudentAction的queryOne方法在42行有问题 检查代码发现传进queryList的wrapper参数没有指定模型编码。添加模型编码问题解决 例2：无权限问题排查 现象：用户前端自定义跳转工作流审批页面，提示无权限 排查路径： 将报错请求复制到接口调试处，查看调试信息 查看debug信息中权限上下文中角色携带的权限是否正确。复制debug信息中的path路径，去权限上下文中搜索查看该路径下所有的权限。 根据上面的path路径搜索权限信息： ~~~ "getRoleActionPermissionsByViewAction:workbench.WorkBenchWorkflowUserTaskActive:WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu": { "630732547466232342": { "/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu/ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_write/ACTION#workflow.WorkflowUserTask#workflow_writeturnon": 1, "/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu/ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_wait/ACTION#workflow.WorkflowUserTask#workflow_agree": 1, } }, ~~~ 参数介绍： 630732547466232342：角色id为630732547466232342拥有的所有权限信息 /workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu：path路径 /ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_write：此path路径下面的ACTION，模型为workbench.WorkBenchWorkflowUserTaskActive的workflow_write动作。 对比无权限页面和以上参数是否对应。可在页面url上查看模型，动作。常见问题有模型不匹配（更换为正常有权限的模型）、角色下无动作权限。 经查看调试信息发现，设置的该角色下并无所需动作的权限信息，考虑由于前端自定义跳转页面没有配置sessionPath所致。 由于5.0版本权限是根据路径进行鉴权的，请求载荷中variables需要携带path路径。 如果是用户自定义跳转页面，需要配置sessionPath：/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu，值为url中的path路径。
点击预约6月10日14:00数式Oinone开源发布会 前端必学课程目录 分类 内容 描述 基础篇 自定义 Mask PC端、移动端默认Mask模板 PC端、移动端默认Mask模板 自定义布局 自定义视图 自定义布局、视图本质上是一样的 PC端默认布局模板 PC端默认布局模板 移动端端默认布局模板 移动端端默认布局模板 自定义表单字段 自定义表格字段 自定义动作 自定义 Graphql 请求 进阶篇 ts + vue 的写法 熟悉 Oinone 的前端开发 注册条件集合 如果你不知道 SPI 应该如何注册，可以参考这篇文章的注册条件集合章节 自定义视图、字段如何获取界面设计的配置 比如自定义了视图或者字段，想要获取界面设计器配置的动作或者其他配置 自定义视图、字段调用界面设计器配置的按钮（包含权限控制） 动态执行动作 自定义视图、字段只修改 UI，不修改数据和逻辑 所有的自定义视图都可以参考这篇文章 自定义视图部分区域渲染设计器的配置 自定义视图部分区域渲染对应设计器配置的与字段、动作 自定义视图内部渲染动态视图 一部分是自定义的视图，另外一部分是其他页面对应的视图 上下文 理解上下文概念 主视图数据和当前视图数据使用介绍 与上篇文章结合 调试篇 调试工具 学会使用平台默认的调试工具 调试工具 通过控制台查看当前视图元数据信息 调试工具 学会浏览器调试 原理篇 SPI 注册 + 渲染原理 了解 SPI 的注册以及渲染原理 移动端入门 Oinone 移动端快速入门 前端常见问题集合目录 分类 内容 描述 表单 表单字段 自定义字段提交的值 表格 如何自定义表格单元格样式 列表视图支持表格、卡片切换 一个视图，多种形态展示，通过切换按钮的方式切换成不同的UI展示 表格如何支持表尾合计计算 自定义表格支持合并或列、表头分组 表格字段 如何在表格的字段内添加动作 动作 如何自定义点击导出动作绑定指定模板 打开弹窗/抽屉的动作如何在弹窗关闭后扩展逻辑 列表页内上下文无关的动作如何添加自定义上下文 提交数据动作如何把弹窗内的数据完全返回 动作跳转页面的时候携带参数 表格页自定义按钮如何获取搜索区域的查询条件 左树右表 界面设计器教程：如何配置左树右表布局 自定义左树右表视图中的树 左树右表视图中的树默认选中第一行 表格上方动作点击时获取左侧树的数据 树型表格全量加载数据如何处理 工作流 如何添加工作流运行时依赖 如何自定义工作流的待办任务列表 样式相关 如何自定义指定页面的样式 主题设置-设置表格全局样式 弹窗、抽屉 弹窗生命周期实践 全局API 获取当前用户信息以及语言 前端动作API 其他问题 自定义字段样式 如何在多标签页切换时自动刷新视图 前端密码加密 Oinone 如何接入乾坤微前端
这篇文档主要介绍在业务场景中，使用调试工具解决前端问题的思路。 调试工具的使用见文档：问题排查调试工具使用手册 调试工具的页面内容介绍：Oinone平台可视化调试工具 场景1：页面上的字段被删除 现象：未查询配置字段的数据 在设计页面给类目字段的“选项字段”配置了“速记码(字段名称为fastCode)”在其中 排查路径： 将问题页面url路由中的page改为debug进入页面调试模式，可以看到页面的调试信息 在标签页“页面字段”内的找到问题字段的配置，可以看到optionFields内还是有字段“速记码(字段名称为fastCode)”的但是存储关联关系模型字段配置的options[0].widggets内只有code、name、id字段了，fastCode的元数据未返回 联系后端开发检查模型定义的代码，发现该字段已被注释删除 跟后端同学沟通字段删除后的处理方案 其他相似场景参考 数据字典项出现过删除、重命名 Field字段出现过重命名、配置项发生过更改 Function函数/Action动作出现过删除、重命名 想查看计算公式、条件隐藏、条件禁用、条件只读等表达式的真实值 场景2：动作权限问题排查 现象：页面配置的动作，部分角色登录后无法看到 设计页面是有个“发消息2”的动作 test01用户登录后，发现页面并没有这个动作 排查路径： 将问题页面url路由中的page改为debug进入页面调试模式，可以看到页面的调试信息 在标签页打开“页面动作”，在设计页面的“返回”动作后并没有看到“发消息2”的动作，我们再去权限管理页面查看权限 在权限管理处，查看当前页面的动作权限情况，可以看到“发信息2”的动作确实没有选中 我们将该动作选中后再次刷新运行时的页面，页面动作全部正确展示。
引言 本文将通过前端的开发者模式带领大家提高自定义组件的开发效率 支持2024年9月6日之后用npm i安装的4.7.x之后的所有版本 介绍前端开发者模式 开发者模式的特性 浏览器控制台可以看到更多利于开发的日志输出 页面顶部状态栏消息模块的轮询接口，将只在页面刷新后请求一次，这样会减少开发阶段不必要的请求，以及解决后端断点调试的时候被消息轮询干扰的问题 页面视图的数据将不在走缓存，而是每次实时从base_view表里查询template字段获取，方便需要实时看通过xml修改的页面效果 如何进入开发者模式 通过在浏览器地址栏后追加;mode=dev刷新页面进入开发者模式，页面加载后可以在浏览器开发者工具的应用标签下的本地存储空间(即localStorage)中看到本标识的存储，如果想退出开发者模式可以手动清除该值 开发者模式的应用场景 1.通过控制台跳转到视图动作(ViewAction)的调试页面 页面刷新后，可以在浏览器开发者工具的控制台看到如下图的日志输出，直接点击该链接可以跳转到当前页面的调试链接弹窗视图动作、抽屉视图动作等以弹出层为展示效果的页面，之前的版本是无法进入调试链接查看的，现在可以在弹窗等视图动作点击后在控制台看到该链接点击进入调试页面 2.查看页面母版(mask)、布局(layout)的匹配情况 母版(mask)匹配结果布局(layout)匹配结果 3.查看视图组件(View)、字段组件(Field)、动作组件(Action)的匹配情况 通过浏览器开发者工具的控制台，我们可以看到每个视图、字段、字段匹配到的组件的class类名，这样我们就知道当前用的是那个组件，在自定义的时候可以在源码查看该组件类的实现代码，然后再选择是否继承该父类。另外我们在给组件定义SPI条件的时候，可以参考匹配入参和匹配结果内的属性。 匹配入参是当前元数据SPI的最全量注册条件 匹配结果是当前匹配到的组件的注册条件，一般情况下我们只需要在匹配结果的条件加上当前模型编码(model)、视图名称(viewName)、字段名称(name)、动作名称(actionName)等条件就可以完成自定义组件的覆盖。 在浏览器开发者工具的控制台，通过模型编码、视图名称、字段名称、动作名称等关键字快速搜索定位到需要查找的组件 控制台搜索快捷键：win系统通过ctrl+f，mac系统通过cmd+f 总结 在确保自定义部分代码最终正确被import导入到启动工程main.ts内的情况下，可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。
