问题排查调试工具使用手册：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低代码应用平台体验
OinoneDesign，旨在帮助开发者和设计师提升设计效率，减少在产品美化上的弯路。规范包括颜色、文字、圆角、阴影等通用设计规范以及组件设计规范，覆盖按钮、布局、导航等多个方面，提供了一套拿来即用的设计系统，以增强B端产品的用户体验和一致性。 框架设计和自由组合• 框架设计：通过合理的规则组织设计元素，以保证高效的运作和视觉的一致性。• 自由组合：在秩序的框架下，去除不必要的束缚，允许各角色充分发挥创意，灵活组合，快速生成符合市场需求的UI设计方案。 我们设定的秩序并非限制，而是为每个角色提供清晰的选择和范围，确保大家能高效协作、创新 点击下载数式Oinone UI示例 一.颜色 二.文字 三.按钮 四.分页 五.下拉菜单 六.级联选择 七.选择器 八.开关 九.标签 十.提示信息 十一.对话框 十二.气泡确认框 十三.文字提示 十四.进度条 十五.图片预览 十六.详情 十七.表格 十八.搜索框 十九.折叠面板 二十.树选择 二十一.上传 二十二.日期选择 二十三.时间选择 二十四.单选框 二十五.多选框 二十六.表单 二十七.步骤条 二十八.输入框 二十九.导航页签 三十.选项卡 三十一.菜单 三十二.预览图备份
1.通过vue devtool查看vue组件和oinone组件的信息 安装vue devtool插件 chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件 安装好插件后，可以通过插件选中html页面中的元素查看相关信息 相关特性了解 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍 template属性为dsl的配置 activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性 action为动作的元数据 field为字段的元数据 2.直接在浏览器开发者工具的源码处调试源码 打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑
这篇文档主要介绍在业务场景中，使用调试工具解决前端问题的思路。 调试工具的使用见文档：问题排查调试工具使用手册 调试工具的页面内容介绍：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”的动作确实没有选中 我们将该动作选中后再次刷新运行时的页面，页面动作全部正确展示。
