前端开发者工具,你最实用的得力助手

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:1

前端开发者工具,你最实用的得力助手

你可能经常遇到这些问题:

客户现场反馈与页面数据相关的问题,需要快速获取前端页面状态数据,支撑问题的定位分析。如:页面控件未按期望显示与隐藏、表格数据显示错行、页面卡顿等。

但在部分特殊场景下,我们无法打开浏览器自带的控制台来查看页面相关数据。如:嵌入了苍穹页面的钉钉桌面客户端等第三方软件,而采用安装其他软件抓取通信数据的方式又比较繁琐低效。

为满足以上使用场景,苍穹V6.0.1新增了一套前端在线数据分析工具,支持快速查看前端页面相关数据,协助定位页面问题。




适用版本


金蝶云·苍穹V6.0.1及以上版本


功能介绍


此套前端开发者工具支持以下功能:


1. 支持快速查看前端时间戳、浏览器内核等版本信息。

2. 支持快速查看网络通信、页面缓存,运行日志、页面性能分析等数据。

3. 支持简单、快速查看页面组件及所在单据关键信息。

4. 支持自动化分析通信数据,自动识别多个场景问题等。


使用方法


接下来介绍工具的具体使用方法:


 1. 功能入口:在任意页面上使用快捷键“shift+F12”或“ctrl+alt+L”激活该工具。

 2. 激活该工具之后,在工具主界面可以查看前端时间戳等内容;操作主界面不同页签,切换到不同功能模块。


  • 主框架功能(工具主界面)


激活该工具后即打开工具主界面,可以快速查看前端时间戳、浏览器内核信息等内容。


上传图片

工具主界面


  • 控制台


通过“控制台”可以查看页面脚本等执行输出的日志。


上传图片

控制台


  • 页面列表


通过“页面列表”可快速查看当前页面包含的所有单据信息(包括单据配置、元数据、页面html结构等)。

其中“表单分析”包含了该单据下控件的状态,可查看控件的关键数据,包括标识、可见性/锁定性状态,以及该控件所在单据的关键信息等。


上传图片

页面列表


  • 页面指令


通过“页面指令”可以获取前后端通信数据并进行自动化分析,针对若干场景问题自动定位并给出提示,提高用户定位问题的效率


上传图片

页面指令


  • 网络请求


通过“网络请求”可以查看前端页面发送出去的所有请求及相关信息,包括所有网络资源加载等。同时“网络请求”与“资源列表”展示了“耗时”信息,帮助用户快速识别耗时长的内容


上传图片

网络请求


  • 数据监控


通过“数据监控”查看前端请求对应服务端操作日志(点击左侧蓝色“请求名称”),以及前后端通信数据。


上传图片

数据监控


  • 性能监控


通过“性能监控”查看单据渲染及网络请求数据中指令执行耗时,为性能分析提供数据支持。


上传图片

性能监控


  • 选择元素


通过“选择元素”功能,可快速查看通过鼠标选中的页面上组件及组件所在单据的关键信息(包括组件标识、组件类型、组件名称、单据标识、单据pageId、单据状态等),同时对选中组件进行自动化分析,获取其状态数据等(目前支持表格控件)。

注意:“选择元素”功能激活,可以鼠标点击该工具主界面左上角“箭头图标”,使用过程中按ESC键可退出该功能。


上传图片

选择元素


上传图片

选择元素功能激活及元素功能结果页面


注意事项


如不激活该工具,则不会主动收集页面相关信息,对系统运行没有任何影响。

划重点

前端开发者工具,是一款前端在线数据的分析工具,支持快速查看前端页面相关数据,协助定位页面问题。主要包括如下功能:

  1. 支持快速查看前端时间戳、浏览器内核等版本信息。

  2. 支持快速查看网络通信、页面缓存,运行日志、页面性能分析等数据。

  3. 支持简单快速地查看页面组件及所在单据关键信息。

  4. 支持自动化分析通信数据,自动识别多个场景问题等。




#往期推荐#

集成WPS,文档编辑和预览另一选择

表单校验体验全新优化升级,速看!

UI主题可视化——轻松实现个性化主题编辑

表格个性化显示,必学!


更多精彩内容,“码”上了解!↓

上传图片

前端开发者工具,你最实用的得力助手

你可能经常遇到这些问题:客户现场反馈与页面数据相关的问题,需要快速获取前端页面状态数据,支撑问题的定位分析。如:页面控件未按期望显...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息