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

目录
相关文章
|
10天前
|
Java API Maven
如何使用Java开发抖音API接口?
在数字化时代,社交媒体平台如抖音成为生活的重要部分。本文详细介绍了如何用Java开发抖音API接口,从创建开发者账号、申请API权限、准备开发环境,到编写代码、测试运行及注意事项,全面覆盖了整个开发流程。
53 10
|
11天前
|
API 开发工具 数据库
开发一份API接口,需要注意这些,看你做到了几项
本文介绍了设计API接口时需注意的关键点,包括数字签名、敏感数据加密与脱敏、限流、参数校验、统一返回与异常处理、请求日志记录、幂等设计、数据量限制、异步处理、参数定义、完整文档及开发者对接SDK等内容,旨在帮助开发者设计出安全、稳定、易维护的API接口。
65 6
开发一份API接口,需要注意这些,看你做到了几项
|
7天前
|
缓存 前端开发 API
深入浅出:后端开发中的RESTful API设计原则
【10月更文挑战第43天】在数字化浪潮中,后端开发如同搭建梦想的脚手架,而RESTful API则是连接梦想与现实的桥梁。本文将带你领略API设计的哲学之美,探索如何通过简洁明了的设计,提升开发效率与用户体验。从资源定位到接口约束,从状态转换到性能优化,我们将一步步构建高效、易用、可维护的后端服务。无论你是初涉后端的新手,还是寻求进阶的开发者,这篇文章都将为你的开发之路提供指引。让我们一起走进RESTful API的世界,解锁后端开发的新篇章。
|
14天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
13天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
|
11天前
|
JSON API 数据格式
如何使用Python开发1688商品详情API接口?
本文介绍了如何使用Python开发1688商品详情API接口,获取商品的标题、价格、销量和评价等详细信息。主要内容包括注册1688开放平台账号、安装必要Python模块、了解API接口、生成签名、编写Python代码、解析返回数据以及错误处理和日志记录。通过这些步骤,开发者可以轻松地集成1688商品数据到自己的应用中。
26 1
|
14天前
|
监控 搜索推荐 安全
探究亚马逊详情API接口:开发与应用
在数字化时代,亚马逊作为全球领先的电商平台,为商家和消费者提供了丰富的商品信息和便捷的购物体验。本文深入探讨了亚马逊详情API接口的获取与运用,帮助开发者和商家实时监控商品数据、分析市场趋势、优化价格策略、分析竞争对手、构建推荐系统及自动化营销工具,从而在竞争中占据优势。文章还提供了Python调用示例和注意事项,确保API使用的安全与高效。
44 3
|
8天前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
33 0
|
9天前
|
数据采集 自然语言处理 搜索推荐
淘宝评价API接口的开发与应用
在数字化商业时代,数据成为企业提升竞争力的关键资源。淘宝作为电商巨头,其商品评论数据极具价值。本文详细介绍了淘宝评价API接口的开发流程与应用场景,从注册账号、获取密钥到实际调用和数据解析,再到商品分析、店铺管理、个性化推荐等多个方面,全面解析了技术细节与实践方法,为企业和开发者提供了宝贵的技术支持和数据资源。
51 0
|
11天前
|
安全 测试技术 持续交付
云计算时代的软件开发与测试:高效、灵活、可扩展
云计算时代的软件开发与测试:高效、灵活、可扩展

相关产品

下一篇
无影云桌面