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

目录
相关文章
|
3天前
|
数据可视化 JavaScript 前端开发
利用Postman和Apipost进行API测试的实践与优化-动态参数
在API测试中,Postman和Apipost是常用的工具。Postman内置变量功能有限,面对复杂场景时需编写JavaScript脚本,增加了维护成本。而Apipost提供丰富的内置变量、可视化动态值配置和低代码操作,支持生成真实随机数据,如邮箱、手机号等,显著提升测试效率和灵活性。对于复杂测试场景,Apipost是更好的选择,能有效降低开发与维护成本,提高测试工作的便捷性和可维护性。
|
22天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
57 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
1天前
|
人工智能 测试技术 API
Windows用户必备:Postman v11详细安装指南与API测试入门教程(附官网下载
Postman是全球领先的API开发与测试工具,支持REST、SOAP、GraphQL等协议调试。2025年最新版v11新增AI智能生成测试用例、多环境变量同步等功能,适用于前后端分离开发、自动化测试、接口文档自动生成及团队协作共享API资源。本文详细介绍Postman的软件定位、核心功能、安装步骤、首次配置、基础使用及常见问题解答,帮助用户快速上手并高效利用该工具进行API开发与测试。
|
5月前
|
测试技术 API 项目管理
API测试方法
【10月更文挑战第18天】API测试方法
101 1
|
2月前
|
搜索推荐 测试技术 API
探秘电商API:从测试到应用的深度解析与实战指南
电商API是电子商务背后的隐形引擎,支撑着从商品搜索、购物车更新到支付处理等各个环节的顺畅运行。它通过定义良好的接口,实现不同系统间的数据交互与功能集成,确保订单、库存和物流等信息的实时同步。RESTful、GraphQL和WebSocket等类型的API各自适用于不同的应用场景,满足多样化的需求。在测试方面,使用Postman、SoapUI和jMeter等工具进行全面的功能、性能和安全测试,确保API的稳定性和可靠性。未来,随着人工智能、大数据和物联网技术的发展,电商API将进一步智能化和标准化,为用户提供更个性化的购物体验,并推动电商行业的持续创新与进步。
67 4
|
2月前
|
Web App开发 JSON 测试技术
API测试工具集合:让接口测试更简单高效
在当今软件开发领域,接口测试工具如Postman、Apifox、Swagger等成为确保API正确性、性能和可靠性的关键。Postman全球闻名但高级功能需付费,Apifox则集成了API文档、调试、Mock与自动化测试,简化工作流并提高团队协作效率,特别适合国内用户。Swagger自动生成文档,YApi开源但功能逐渐落后,Insomnia界面简洁却缺乏团队协作支持,Paw仅限Mac系统。综合来看,Apifox是国内用户的理想选择,提供中文界面和免费高效的功能。
|
3月前
|
JSON API 数据格式
淘系等商品评论Json数据格式参考,API接口测试
通过以上示例和说明,你可以了解淘系商品评论的JSON数据结构和如何使用相关API接口获取评论数据。在实际操作中,你需要参考具体的API接口文档和开放平台的相关说明进行配置和调用。
|
3月前
|
测试技术 API 数据库
淘宝商品详情高级版 (item_get_pro)API如何测试
要测试淘宝商品详情高级版API(item_get_pro),需先阅读API文档,注册开放平台账号,创建应用获取密钥,搭建测试环境,选择测试工具。测试时设计用例,配置工具,发送请求,验证响应,记录日志。注意安全和数据格式。
|
3月前
|
监控 数据管理 测试技术
API接口自动化测试深度解析与最佳实践指南
本文详细介绍了API接口自动化测试的重要性、核心概念及实施步骤,强调了从明确测试目标、选择合适工具、编写高质量测试用例到构建稳定测试环境、执行自动化测试、分析测试结果、回归测试及集成CI/CD流程的全过程,旨在为开发者提供一套全面的技术指南,确保API的高质量与稳定性。
|
4月前
|
Java 测试技术 API
详解Swagger:Spring Boot中的API文档生成与测试工具
详解Swagger:Spring Boot中的API文档生成与测试工具
142 4

热门文章

最新文章

  • 1
    小鱼深度评测 | 通义灵码2.0,不仅可跨语言编码,自动生成单元测试,更炸裂的是集成DeepSeek模型且免费使用,太炸裂了。
  • 2
    3天功能开发→3小时:通义灵码2.0+DEEPSEEK实测报告,单元测试生成准确率92%的秘密
  • 3
    Potpie.ai:比Copilot更狠!这个AI直接接管项目代码,自动Debug+测试+开发全搞定
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 5
    基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    「ximagine」业余爱好者的非专业显示器测试流程规范,同时也是本账号输出内容的数据来源!如何测试显示器?荒岛整理总结出多种测试方法和注意事项,以及粗浅的原理解析!
  • 8
    用户说 | 通义灵码2.0,跨语言编码+自动生成单元测试+集成DeepSeek模型且免费使用
  • 9
    阿里云零门槛、轻松部署您的专属 DeepSeek模型体验测试
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 相关产品