你有没有觉得在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写好,粘贴到这里直接执行看效果
+