1. Oinone社区Home
  2. 前端

如何通过浏览器开发者工具提高调试效率

nation • • 前端, 开发排错技巧 • 2160 views

1.通过vue devtool查看vue组件和oinone组件的信息

如何通过浏览器开发者工具提高调试效率

平台字段、动作、视图组件都是以Widget结尾的，可以通过关键字快速找到组件

安装vue devtool插件

chrome安装最新版的vue devtool插件 谷歌应用商店插件地址，隐藏窗口需要在扩展程序的详情页额外设置才能使用该插件

安装好插件后，可以通过插件选中html页面中的元素查看相关信息

相关特性了解
  • 组件自动创建的vue组件以组件的class类名命名，据此特性可以得出自定义组件的时候，可继承该命名的父类
  • 一般oinone的组件以Widget后缀命名，也推荐大家也以此为后缀，方便在vue调试面板快速看出哪些是oinone组件
  • 选中oinone组件后可以在右侧面板看到相关的组件信息，部分属性介绍
    1. template属性为dsl的配置
    2. activeRecords、formData、rootData、parentData、dataSource等属性为常用数据属性
    3. action为动作的元数据
    4. field为字段的元数据

2.直接在浏览器开发者工具的源码处调试源码

打开浏览器开发者工具，进入标签页源代码/来源(英文版为Source)，win系统用快捷键ctrl+O，mac系统用快捷键cmd+O, 可以打开文件搜索面板，通过关键字搜索文件名找到代码文件，可直接在里面debug调试或者查看执行逻辑
如何通过浏览器开发者工具提高调试效率

Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/17130.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
nation's avatarnation数式员工
0 0
Previous 2024年9月6日 pm8:36
Next 2024年9月10日 am9:30

相关推荐

  • 前端 SPI 注册 + 渲染 前端

    前端 SPI 注册 + 渲染

    在阅读本篇文章之前，您需要学习以下知识点： 1: TS 结合 Vue 实现动态注册和响应式管理 前端开发者在使用 oinone 平台的时候会发现，不管是自定义字段还是视图，对应的 typescript 都会用到@SPI.ClassFactory(参数)，然后在对用的class中重写initialize方法`: @SPI.ClassFactory(参数) export class CustomClass extends xxx { public initialize(props) { super.initialize(props); this.setComponent(FormString); return this; } } 本文将带您熟悉 oinone 前端的 SPI 注册机制以及 TS + Vue 的渲染过程。 不管是自定义字段还是视图@SPI.ClassFactory(参数)都是固定写法，区别在于参数不同，这篇文章里面详细描述了参数的定义。 SPI 注册机制 有自定义过字段、视图经验的开发者可能会发现，字段(表单字段)SPI 注册用的是FormFieldWidget.Token生成对应的参数，视图 SPI 注册用的是BaseElementWidget.Token，那么为什么要这样定义呢？ 大家可以想象成现在有一个大的房子，房子里面有很多房间，每个房间都有自己的名字，比如FormFieldWidget就是房间的名字，BaseElementWidget也是房间的名字，这样一来我们就可以根据不同的房间存放不同的东西。 下面给大家展示下伪代码实现： class SPI { static container = new Map<string, WeakMap<object, object>>() static ClassFactory(token) { return (target) => { if(!SPI.container.get(token.type)) { SPI.container.set(token.type, new WeakMap()) } const services = SPI.container.get(token.type) services?.set(token, target) } } } class FormFieldWidget { static Token(options) { return { …options, type: 'Field' } } static Selector(options) { const fieldWidgets = SPI.container.get('Field') if(fieldWidgets) { return fieldWidgets.get(options)! } return null } } @SPI.ClassFactory(FormFieldWidget.Token({ viewType: 'Form', ttype: 'String', widget: 'Input' })) class StringWidget { } // 字段元数据 const fieldMeta = { name: "name", field: "name", mode: 'demo.model', widget: 'Input', ttype: 'String', viewType: 'Form' } // 找到对应的widget const widget = FormFieldWidget.Selector({ viewType: fieldMeta.viewType, ttype: fieldMeta.ttype, widget: fieldMeta.widget, }) 在上述代码中，我们主要是做了这么写事情： 1.SPI class class SPI { static container = new Map<string, WeakMap<object, object>>() } SPI 类是一个静态类，用于管理服务的注册和获取。 container 是一个静态属性，类型是 Map，它的键是字符串，值是 WeakMap。这个结构允许我们为每个服务类型（例如，Field）管理多个服务实例。 2.ClassFactory 方法 static ClassFactory(token) { return (target) => { if…

    汤乾华's avatar 汤乾华
    2024年9月26日
    2.0K00
  • 【前端】默认布局模板（v4） 前端

    【前端】默认布局模板（v4）

    默认母版（Mask） PC端默认母版 <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask> PC端默认内联Tabs母版（<multi-tabs inline="true" />） <mask> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <block height="100%" flex="1 0 0" flexDirection="column" alignContent="flex-start" flexWrap="nowrap" overflow="hidden"> <multi-tabs inline="true" /> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </block> </container> </mask> 移动端默认母版 <mask> <widget widget="user" /> <widget widget="nav-menu" app-switcher="true" menu="true" /> <widget widget="main-view" height="100%" /> </mask> PC端默认布局（Layout） 表格视图（TABLE） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 表单视图（FORM） <view type="FORM"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="form" slot="form"> <xslot name="fields" /> </element> </view>…

    oinone's avatar oinone
    2023年11月1日
    1.6K01
  • 前端页面嵌套 组件

    前端页面嵌套

    我们可能会遇到这些需求，如：页面中的一对多字段不是下拉框，而是另一个模型的表单组；页面中的步骤条表单，每一步的表单都需要界面设计器设计，同时这些表单可能属于不同模型。这时候我们就可以采取页面嵌套的方式，在当前页面中，动态创建一个界面设计器设计的子页面。以一对多字段，动态创建表单子页面举例，以下是代码实现和原理分析。 代码实现 AddSubformWidget 动态添加表单 ts 组件 import { ModelFieldType, ViewType, SPI, BaseFieldWidget, Widget, FormO2MFieldWidget, ActiveRecord, CallChaining, createRuntimeContextByView, queryViewDslByModelAndName, uniqueKeyGenerator } from '@oinone/kunlun-dependencies'; import { MyMetadataViewWidget } from './MyMetadataViewWidget'; import { watch } from 'vue'; import AddSubform from './AddSubform.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'AddSubform' }) ) export class AddSubformWidget extends FormO2MFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(AddSubform); return this; } @Widget.Reactive() public myMetadataViewWidget: MyMetadataViewWidget[] = []; @Widget.Reactive() public myMetadataViewWidgetKeys: string[] = []; @Widget.Reactive() public myMetadataViewWidgetLength = 0; // region 子视图配置 public get subviewModel() { return this.getDsl().subviewModel || 'clm.contractcenter.ContractSignatory'; } public get subviewName() { return this.getDsl().subviewName || '签署方_FORM_uiViewa9c114903e104800b15e8f3749656b64'; } // region 添加子视图块 // 按钮添加点击事件 @Widget.Method() public async onAddSubviewBlock() { const resView = await queryViewDslByModelAndName(this.subviewModel, this.subviewName); this.createDynamicSubviewWidget(resView); } // 创建子视图块 public async createDynamicSubviewWidget(view, activeRecord: ActiveRecord = {}) { if (view) { // 根据视图构建上下文 const runtimeContext = createRuntimeContextByView( { type: ViewType.Form, model: view.model, modelName: view.modelDefinition.name, module: view.modelDefinition.module, moduleName: view.modelDefinition.moduleName, name: view.name, dsl: view.template }, true, uniqueKeyGenerator(), this.currentHandle ); // 取得上下文唯一标识 const runtimeContextHandle = runtimeContext.handle; const slotKey = `Form_${uniqueKeyGenerator()}`; // 创建子视图组件 const widget = this.createWidget(new MyMetadataViewWidget(runtimeContextHandle), slotKey, // 插槽名 { metadataHandle: runtimeContextHandle,…

    银时's avatar 银时
    2025年7月21日
    1.2K00
  • oio-input 输入框 组件

    oio-input 输入框

    代码演示 <oio-input v-model:value="value"></oio-input> API Input 参数 说明 类型 默认值 版本 addonAfter 带标签的 input，设置后置标签 string|slot addonBefore 带标签的 input，设置前置标签 string|slot allowClear 可以点击清除图标删除内容 boolean defaultValue 输入框默认内容 string disabled 是否禁用状态，默认为 false boolean false maxlength 最大长度 number prefix 带有前缀图标的 input slot showCount 是否展示字数 boolean false suffix 带有后缀图标的 input slot type 声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 <a-textarea /> 代替 type="textarea")。 string text value(v-model:value) 输入框内容 string Input 事件 事件名称 说明 回调参数 update:value 输入框内容变化时的回调 function(e) pressEnter 按下回车的回调 function(e) Input.Search 代码演示 <oio-input-search v-model:value="value"></oio-input-search> Input.Search 事件 事件名称 说明 回调参数 search 点击搜索或按下回车键时的回调 function(value, event) 其余属性和 Input 一致。

    汤乾华's avatar 汤乾华
    2023年12月18日
    2.7K00
  • 【界面设计器】自定义字段组件实战——表格字段组合展示 前端

    【界面设计器】自定义字段组件实战——表格字段组合展示

    阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一列使用多个字段组合展示。 演示内容：表格中存在两列，【编码】和【基础信息】。将【名称】、【创建时间】、【更新时间】在【基础信息】一列展示。 业务分析及实现思路 从需求来看，我们需要实现一个【组合列】组件，并且该组件允许在【表格】视图中使用。由于【组合列】本身也是一个字段，因此这里需要选择需要组合字段中的其中一个字段作为组件切换的基础字段，比如我们可以选择【名称】字段作为基础字段。 在【组合列】组件的属性面板中，我们需要再自定义一个【组合列配置】组件，用来选择需要将哪些字段进行组合，以及为每个组合提供一些基础配置。 这里需要理解一个基本概念，即【组合列】的属性面板是【组合列配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【组合列配置】组件，并且该组件允许在【表单】视图中使用。其业务类型使用【文本】，我们在保存配置数据时，可以使用JSON数据结构来存储复杂结构。（这里的实现思路并非是最符合协议设定的，但可以满足绝大多数组件场景） 在【组合列配置】组件中，我们可以允许用户添加/移除组合，并且每个组合有两个属性，【标题】和【字段】。 准备工作 此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 创建时间 createDate 日期时间 否 – 更新时间 updateDate 日期时间 否 – 实现页面效果展示 表格视图 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建组合列组件 创建组合列元件 创建组合列配置组件 创建组合列配置元件 设计组合列元件属性面板 创建compositeConfig字段，并切换至【组合配置】组件。 设计组合列配置元件属性面板 启动SDK工程进行组件基本功能开发 PS：这里由于我们创建了两个组件，因此，将SDK分开下载后，然后将组合列配置SDK中的演示代码(kunlun-plugin/src)移动到组合列SDK中，在同一工程中进行开发，最后只需将相关JS文件和CSS文件上传到组合列组件中即可，组合列配置组件可以不进行上传。这里需要注意的是，上传多个包含相同组件功能的JS文件和CSS文件可能在运行时导致无法正常替换、冲突等问题。 (npm相关操作请自行查看SDK工程中内置的README.MD) 开发步骤参考 打开【表格】视图，将【名称】字段的组件切换为【组合列】组件。 在属性面板中看到【组合列配置】组件，并优先实现【组合列配置】组件。这里的属性面板就是【组合列配置】对应的【执行页面】。 当【组合列配置】组件可以按照预先设计的数据结构正确保存compositeConfig属性时，可以在【组合列】组件中的props定义中直接获取该属性，接下来就可以进行【组合列】组件的开发。 代码实现参考 工程结构 typing.ts export interface CompositeConfig { key: string; label?: string; field?: string; value?: string; } CompositeColumnConfig.vue <template> <div class="composite-column-config"> <oio-form v-for="item in list" :data="item" :key="item.key"> <oio-form-item label="标题" name="label"> <oio-input v-model:value="item.label" /> </oio-form-item> <oio-form-item label="字段" name="field"> <a-select class="oio-select" dropdownClassName="oio-select-dropdown" v-model:value="item.field" :options="fields" /> </oio-form-item> <oio-button type="link" @click="() => removeItem(item)">移除</oio-button> </oio-form> <oio-button type="primary" block @click="addItem">添加</oio-button> </div> </template> <script lang="ts"> import { uniqueKeyGenerator } from '@kunlun/dependencies'; import { WidgetInstance } from '@kunlun/ui-designer-dependencies'; import { OioButton, OioForm, OioFormItem, OioInput } from '@kunlun/vue-ui-antd'; import { Select as ASelect } from 'ant-design-vue'; import { computed, defineComponent, PropType, ref, watch } from 'vue'; import { CompositeConfig } from '../../typing'; export default defineComponent({ name: 'CompositeColumnConfig', components: { OioForm, OioFormItem, OioInput, OioButton, ASelect }, props: { currentInstance: { type:…

    数式-海波's avatar 数式-海波
    2023年11月1日
    1.6K00

Leave a Reply

Please Login to Comment