【分享】宜搭开发,快速离线测试代码、组件api、组件属性

简介: 【分享】利用好浏览器的控制台功能(F12=>控制台) by 页一

你有没有觉得在JS面板测试一些简单的代码很麻烦,不管测试什么代码都要频繁保存预览看效果。

如何不用频繁保存预览也能离线本地快速测试简单的代码,快速查看对象所有属性和方法,自动代码提示等。


方法就是利用好浏览器的F12控制面板中的控制台

在宜搭设计页面按F12打开控制台



  • 在控制台面板可以直接快速测试各种js代码

通过在控制台输入输入各种代码,按回车他会立即执行并显示执行结果


  • [强烈推荐]宜搭默认自带的Lodash插件

数组、对象处理利器,封装好了各种超级方便的方法,宜搭数据处理利器

_. 下划线就是lodash这个对象  详情官网https://www.lodashjs.com/

例如:取一个数组中的最大值


  • 离线快速查看window.loginUser对象的属性

loginUser这个对象里面存着用户登录信息

这里只是举例离线快速打印这个对象


  • 离线快速测试宜搭组件的api、查看组件属性

1.在JS面板中的页面加载完毕里面写入以下代码

window._that=this; //_that就是当前表单的上下文,就是js面板中的this

2.点击预览==>新窗口中打开

3.在新窗口中的控制台就可以离线快速测试宜搭组件的api

不用频繁保存预览去测试,这样做还可以减轻宜搭服务器压力

初学者测试好,了解这个api后就可运用到js面板,关键是它还有完善的代码提示功能


例如:离线测试多选组件的各种方法和查看该组件的属性


  • 你还可以对着这些对象右键单击快速复制属性路径或者属性的值

这样做,就不用在js面板中依次输入data.data[0].formData.字段名[0].字段属性

它会体贴的快速给你复制出来

例如下图快速复制出data[2].text


  • 快速离线查看测试宜搭封装的工具函数utils,有时候记不住api名称,又懒得翻文档,用这个方法就能有完整的代码提示

这里你可以放心测试,因为是离线本地测试,它不会把测试代码保存到服务器上

那怕是你在这里写了死循环,刷新一下就恢复了,不会造成你表单卡死无法恢复的情况

教你个小技巧,如果是多行代码,你可以利用vsCode写好,粘贴到这里直接执行看效果

钉钉.png+

目录
相关文章
|
8月前
|
人工智能 数据可视化 测试技术
Postman 性能测试教程:快速上手 API 压测
本文介绍API上线后因高频调用导致服务器告警,通过Postman与Apifox进行压力测试排查性能瓶颈。对比两款工具在批量请求、断言验证、可视化报告等方面的优劣,探讨API性能优化策略及行业未来发展方向。
Postman 性能测试教程:快速上手 API 压测
|
7月前
|
自然语言处理 监控 API
速卖通商品详情API秘籍!轻松获取SKU属性数据
速卖通商品详情API(aliexpress.item.get)支持通过编程获取商品标题、价格、SKU、库存、销量、物流模板、评价及店铺信息,适用于价格监控、选品分析等场景。接口支持多语言返回,采用AppKey+AppSecret+Token认证,需签名验证,确保安全调用。
|
7月前
|
安全 API
亚马逊商品详情 API 秘籍!轻松获取 SKU 属性数据
亚马逊商品详情API是官方接口,通过ASIN获取商品标题、价格、库存、评价等50余项数据,支持多站点查询。包含Product Advertising API与MWS两类,分别用于商品信息获取和卖家店铺管理,采用AWS4-HMAC-SHA256认证,保障请求安全。
|
7月前
|
JSON 缓存 API
淘宝天猫商品详情API秘籍!轻松获取SKU属性数据
淘宝商品详情API(taobao.item.get)可获取商品标题、价格、SKU、库存等全量信息,支持RESTful调用,返回JSON数据,适用于电商导购与竞品分析。需企业实名认证,申请权限后通过签名加密请求。Python示例展示如何调用接口,配合fields参数可优化性能,应对频率限制与数据延迟建议轮询+缓存策略。
|
8月前
|
人工智能 数据可视化 测试技术
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
AI 时代 API 自动化测试实战:Postman 断言的核心技巧与实战应用
1007 11
|
机器学习/深度学习 人工智能 并行计算
AI部署架构:A100、H100、A800、H800、H20的差异以及如何选型?开发、测试、生产环境如何进行AI大模型部署架构?
AI部署架构:A100、H100、A800、H800、H20的差异以及如何选型?开发、测试、生产环境如何进行AI大模型部署架构?
AI部署架构:A100、H100、A800、H800、H20的差异以及如何选型?开发、测试、生产环境如何进行AI大模型部署架构?
|
8月前
|
存储 测试技术 API
数据驱动开发软件测试脚本
今天刚提交了我的新作《带着ChatGPT玩转软件开发》给出版社,在写作期间跟着ChatGPT学到许多新知识。下面分享数据驱动开发软件测试脚本。
322 0
|
11月前
|
传感器 人工智能 JavaScript
鸿蒙开发:DevEcoTesting中的稳定性测试
DevEcoTesting主要的目的也是用于软件的测试,可以让开发者无需复杂的配置,即可一键执行测试任务,同时提供了测试报告和分析,无论是对于开发者还是测试同学来说,都是一个非常方便的工具。
337 3
鸿蒙开发:DevEcoTesting中的稳定性测试
|
10月前
|
敏捷开发 运维 数据可视化
DevOps看板工具中的协作功能:如何打破开发、测试与运维之间的沟通壁垒
在DevOps实践中,看板工具通过可视化任务管理和自动化流程,提升开发与运维团队的协作效率。它支持敏捷开发、持续交付,助力团队高效应对需求变化,实现跨职能协作与流程优化。
|
10月前
|
运维 jenkins 测试技术
"还在苦等开发部署环境?3步教你用Jenkins拿回测试主动权"
测试工程师最头疼的问题是什么?依赖开发部署环境! 开发延期→测试时间被压缩→紧急上线后BUG频出→测试背锅。传统流程中,测试被动等待部署,效率低下。而Jenkins自动化部署让测试人员自主搭建环境,实现: ✅ 随时触发测试,不再苦等开发 ✅ 部署效率提升10倍,抢回测试时间 ✅ 改善团队协作,减少互相甩锅 学习Jenkins部署能力,成为高效测试工程师,告别被动等待!

相关产品