【分享】宜搭开发,快速离线测试代码、组件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+

目录
相关文章
|
7月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
7月前
|
API 开发者 数据采集
高效获取淘宝商品详情:API 开发实现链接解析的完整技术方案
2025反向海淘新机遇:依托代购系统,聚焦小众垂直品类,结合Pandabay数据选品,降本增效。系统实现智能翻译、支付风控、物流优化,助力中式养生茶等品类利润翻倍,新手也能快速入局全球市场。
高效获取淘宝商品详情:API 开发实现链接解析的完整技术方案
|
8月前
|
数据采集 缓存 API
小红书笔记详情 API 实战指南:从开发对接、场景落地到收益挖掘(附避坑技巧)
本文详解小红书笔记详情API的开发对接、实战场景与收益模式,涵盖注册避坑、签名生成、数据解析全流程,并分享品牌营销、内容创作、SAAS工具等落地应用,助力开发者高效掘金“种草经济”。
小红书笔记详情 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参数可优化性能,应对频率限制与数据延迟建议轮询+缓存策略。
|
7月前
|
存储 缓存 算法
淘宝买家秀 API 深度开发:多模态内容解析与合规推荐技术拆解
本文详解淘宝买家秀接口(taobao.reviews.get)的合规调用、数据标准化与智能推荐全链路方案。涵盖权限申请、多模态数据清洗、情感分析、混合推荐模型及缓存优化,助力开发者提升审核效率60%、商品转化率增长28%,实现UGC数据高效变现。
|
7月前
|
存储 缓存 算法
亚马逊 SP-API 深度开发:关键字搜索接口的购物意图挖掘与合规竞品分析
本文深度解析亚马逊SP-API关键字搜索接口的合规调用与商业应用,涵盖意图识别、竞品分析、性能优化全链路。通过COSMO算法解析用户购物意图,结合合规技术方案提升关键词转化率,助力卖家实现数据驱动决策,安全高效优化运营。
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
11月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
1485 23

热门文章

最新文章

相关产品