引言
本文将通过前端的开发者模式带领大家提高自定义组件的开发效率
支持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内的情况下，可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/17071.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
