IDE新特性,面板工具,sourcemap可视化
一. 面板工具设备列表
背景
面对开发调试阶段中面板小程序的各种复杂情况,例如:需要在真实设备和群组设备上进行测试,以及同一个面板小程序需要兼容多个产品,如1-5路(彩光、白光)的照明设备,我们深知在IDE上调试的繁琐和不便。
为了解决这些问题,提升您的调试效率,我们在开发者工具的面板工具插件中引入了全新的 "设备列表" 功能。通过这项功能,您可以轻松在不同设备间切换,进行专项调试,直观体验小程序在各设备上的运行效果,满足多种产品的兼容性需求。
- 切换家庭
- 房间选择
- 设备选择
- 插件版本选择
- 刷新设备列表
- 添加虚拟设备
详情查看:https://developer.tuya.com/cn/miniapp/p ... ual-device
二. 可视化sourcemap工具
背景
小程序的代码在发布时会经过混淆以及压缩,压缩后的代码可读性大大降低,在定位一些线上异常信息的时候非常不方便。因此我们在开发者工具中增加了 SourceMap 可视化功能,便于根据线上异常信息索引定位到源代码中。提高开发者分析异常的的效率。
使用
1.查看异常信息
开发者可通过【打开调试】的方式,使用 vConsole 查看错误内容,例如
如上图中,提示 Can`t find varable: d 的错误,根据调用栈提示在 a2@b1y/eo8LLi.js:1:10944 中触发,记住此信息。
b1y/eo8LLi.js 是压缩混淆后的文件名。
2.使用开发者工具定位源码
在 IDE 里默认情况下是不开启混淆压缩的(既 development 开发模式),因为这会降低 watch 的编译速度。当我们要查看线上异常的时候,可手动开启 production 线上构建模式。
可在项目配置中勾选 【watch 启用 production 模式】 开启,保存变更后,点击左上角返回回到项目列表,重新进入项目等待编译即可。
开启成功后可在编译日志看到 【watch enable production mode】 字样.
3.进入sourcemap面板
如未看到 .js.map 文件列表,可点击 【Refresh the sourcemap list】进行手动刷新。
4.选择对应的文件
在右侧顶部的 position 输入框中输入错误信息提示的行号列号 (1:10944) 回车确定,则会定位到对应的 Generated code 代码内容,鼠标点击对应的位置,则在左侧自动滚动定位到具体的源码中。
源码文件完整信息可在左侧顶部 Original code 下拉框中查看。
我们相信这样的技术升级将能大大改善您的开发体验,节省您的宝贵时间,让开发变得更为轻松和高效。立即体验并开始您的高效率开发之旅吧!