IDE新特性,面板工具,sourcemap可视化

小程序开发相关产品技术讨论,包括面板、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


Post Reply
User avatar
智能小程序管理员
Posts: 66

一. 面板工具设备列表

背景

面对开发调试阶段中面板小程序的各种复杂情况,例如:需要在真实设备和群组设备上进行测试,以及同一个面板小程序需要兼容多个产品,如1-5路(彩光、白光)的照明设备,我们深知在IDE上调试的繁琐和不便。

为了解决这些问题,提升您的调试效率,我们在开发者工具的面板工具插件中引入了全新的 "设备列表" 功能。通过这项功能,您可以轻松在不同设备间切换,进行专项调试,直观体验小程序在各设备上的运行效果,满足多种产品的兼容性需求。

device-list.png
  1. 切换家庭
  2. 房间选择
  3. 设备选择
  4. 插件版本选择
  5. 刷新设备列表
  6. 添加虚拟设备

详情查看:https://developer.tuya.com/cn/miniapp/p ... ual-device

二. 可视化sourcemap工具

背景

小程序的代码在发布时会经过混淆以及压缩,压缩后的代码可读性大大降低,在定位一些线上异常信息的时候非常不方便。因此我们在开发者工具中增加了 SourceMap 可视化功能,便于根据线上异常信息索引定位到源代码中。提高开发者分析异常的的效率。

使用

1.查看异常信息

开发者可通过【打开调试】的方式,使用 vConsole 查看错误内容,例如

截屏2023-12-26 17.55.26.png

如上图中,提示 Can`t find varable: d 的错误,根据调用栈提示在 a2@b1y/eo8LLi.js:1:10944 中触发,记住此信息。
b1y/eo8LLi.js 是压缩混淆后的文件名。

2.使用开发者工具定位源码

在 IDE 里默认情况下是不开启混淆压缩的(既 development 开发模式),因为这会降低 watch 的编译速度。当我们要查看线上异常的时候,可手动开启 production 线上构建模式。

截屏2023-12-26 17.56.56.png

可在项目配置中勾选 【watch 启用 production 模式】 开启,保存变更后,点击左上角返回回到项目列表,重新进入项目等待编译即可。

开启成功后可在编译日志看到 【watch enable production mode】 字样.

3.进入sourcemap面板

截屏2023-12-26 17.57.54.png

如未看到 .js.map 文件列表,可点击 【Refresh the sourcemap list】进行手动刷新。

4.选择对应的文件

在右侧顶部的 position 输入框中输入错误信息提示的行号列号 (1:10944) 回车确定,则会定位到对应的 Generated code 代码内容,鼠标点击对应的位置,则在左侧自动滚动定位到具体的源码中。
源码文件完整信息可在左侧顶部 Original code 下拉框中查看。

截屏2023-12-26 18.00.10.png

我们相信这样的技术升级将能大大改善您的开发体验,节省您的宝贵时间,让开发变得更为轻松和高效。立即体验并开始您的高效率开发之旅吧!

Post Reply