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

目录
相关文章
|
12月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
12月前
|
API 开发者 数据采集
高效获取淘宝商品详情:API 开发实现链接解析的完整技术方案
2025反向海淘新机遇:依托代购系统,聚焦小众垂直品类,结合Pandabay数据选品,降本增效。系统实现智能翻译、支付风控、物流优化,助力中式养生茶等品类利润翻倍,新手也能快速入局全球市场。
高效获取淘宝商品详情:API 开发实现链接解析的完整技术方案
|
数据采集 缓存 API
小红书笔记详情 API 实战指南:从开发对接、场景落地到收益挖掘(附避坑技巧)
本文详解小红书笔记详情API的开发对接、实战场景与收益模式,涵盖注册避坑、签名生成、数据解析全流程,并分享品牌营销、内容创作、SAAS工具等落地应用,助力开发者高效掘金“种草经济”。
小红书笔记详情 API 实战指南:从开发对接、场景落地到收益挖掘(附避坑技巧)
|
12月前
|
存储 缓存 算法
淘宝买家秀 API 深度开发:多模态内容解析与合规推荐技术拆解
本文详解淘宝买家秀接口(taobao.reviews.get)的合规调用、数据标准化与智能推荐全链路方案。涵盖权限申请、多模态数据清洗、情感分析、混合推荐模型及缓存优化,助力开发者提升审核效率60%、商品转化率增长28%,实现UGC数据高效变现。
|
12月前
|
存储 缓存 算法
亚马逊 SP-API 深度开发:关键字搜索接口的购物意图挖掘与合规竞品分析
本文深度解析亚马逊SP-API关键字搜索接口的合规调用与商业应用,涵盖意图识别、竞品分析、性能优化全链路。通过COSMO算法解析用户购物意图,结合合规技术方案提升关键词转化率,助力卖家实现数据驱动决策,安全高效优化运营。
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
1766 23
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
2440 24
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
1352 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1163 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡

相关产品