请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用调试器1020版发布啦!!!

6
回复
7858
查看
  [复制链接]

4

主题

23

帖子

390

积分

 楼主| 2018-9-6 21:23:00 显示全部楼层 |阅读模式
本帖最后由 欧巴宾 于 2018-9-11 16:20 编辑
各位亲爱的开发者,大家期待的最新1020版调试器发布啦!
-------------------- 上个1010版本,我们收到很多开发者对于调试器的吐槽:
  • Netowork面板:无法查看fetch网络请求;
  • console面板:输出变量时,无法展开查看内部属性;
  • Source面板:断点偶发添加不上,无法调试JS;
对于上述与其他细节问题,我们在这个1020版本已经修复! -------------------- 除此之外,为了更多的满足开发者的需求,我们还增加了几项更赞的功能,比如:
  • Elements面板:支持修改CSS选择器样式,修改元素属性,编辑HTML等功能
  • 修改源码时,仅重新加载当前页,无需重新加载rpk
  • 通过USB线连接来调试,这种方式不再要求手机和电脑在同一局域网,也无需扫描二维码
  • 调试器添加设置选项-等待devTools连接,可断点调试首页
abc.gif
-------------------- 为了让开发者了解调试器的最新功能,我们制作了下面功能的动态图,大家可以一睹为快: 版本要求: 注意:1020平台必须用最新的调试器,最新调试器可以调试之前版本的平台
新版界面如下
1020view.png
效果体验如下
1. Network 面板 可以监控fetch请求和其他没有被缓存的请求
1020network.gif
2. Console 面板 输出变量时,可以展开查看内部属性
1020console(1).gif
3. Source 面板 3.1 添加断点,刷新浏览器断点生效
1020breakpoint.gif
3.2 修改源码时,仅重新加载当前页,无需重新加载rpk
  • 在之前版开发时,如果npm run watch,每次保存修改都会回到首页,不方便调试。
  • 新版调试时可以设置应用更新策略,更新rpk仅刷新当前页
开发调试效果如下
1020hotreload(1).gif
步骤如下: 1)手机快应用调试器 中选择‘’设置应用更新策略 仅刷新页面“
WechatIMG2.png
2)编辑器修改当前页然后运行npm run build ;若已经运行 npm run watch ,直接保存修改 注:如果想刷新整个应用,可以关闭运行的快应用然后重新运行rpk 3.3 应用启动时调试 如果想调试应用启动时运行的代码,比如onInit ,app.ux,可以先开启 调试器->设置->调试->“等待DevTools连接”,然后在要 在代码里添加“debugger”,效果如下:
1020debugger(1).gif
如果想禁用source map 可以build时执行 npm run build -- --env.disable-source-map 4. Elements面板:修改CSS选择器样式,修改元素属性,编辑HTML
1020element(1).gif
5. 通过USB连接电脑调试
此方式不需要手机和电脑在同一局域网,也不需要扫描二维码 步骤如下:
1)手机设置 →开发者选项 → 开启USB调试
WechatIMG1.jpeg
2) 手机快应用调试器 选择“开启USB调试”
usbdebug.png
3)电脑 快应用项目下运行 npm run server
4)手机USB连接电脑,看到命令行提示手机设备被连入提示 5)手机调试器点击在线更新,开始调试 ,进行调试 调试方法和wifi一致 注意:使用USB调试过程中,启用其他adb调试可能会使USB调试断开,比如Andriod Studio的ADB调试,如果出现问题请重新启动npm run server
-------------------- 1020版调试器具体更新如下:
  • 新增:USB调试功能
  • 新增:显示fetch请求和其他没有被缓存的网络请求
  • 新增:调试时修改class样式
  • 新增:调试时修改修改元素属性
  • 新增:编辑元素HTML,展示编辑元素缩进
  • 新增:调试器添加设置选项-应用更新策略选项,更新rpk可以只刷新当前页
  • 新增:调试器添加设置选项-等待devTools连接,可断点调试首页
  • 优化:解决console输出对象不能展开问题
  • 优化:解决断点添加不上问题
  • 优化:解决source-map不生效问题
  • 优化:显示预览面板选中元素盒模型
-------------------- 需要注意的问题: 1. 调试器和1020平台都需要安装,平台更新调试也会一起更新。此处下载
download.jpg
2. hap-toolkit 升级后需要在项目中 hap update --force
3. 如果发现点击“开始调试” 不能调起调试页面可做以下尝试 1) 关闭手机中运行的rpk 然后再点击“开始调试” 2) 检查电脑终端是否有打印出调试URL,如果打印出来可以用chrome直接打开URL调试 3) 如果使用的wifi 调试检查是否在同一网段 4) 如果使用的USB调试,检查手机设置开发者选项里面是否开启usb调试
如果大家在调试过程中有任何疑问,请随时给我留言或者私信~
--------------------
已发现问题: 1. 设置为“应用更新策略 —> 仅刷新页面 ”修改后,回退时报错
2. 升级0.0.36版本后,使用windows编译项目,相对路径设置的背景图片无法显示
原因:编译工具对windows路径解析存在问题
建议:使用绝对路径
会在下周的0.0.37版修复
对于收集到的问题,我们会非常迅猛的发版修正~
回复

使用道具 举报

0

主题

1

帖子

5

积分

2018-9-7 18:14:48 显示全部楼层
支持小姐姐的帖子,碰到的问题小姐姐都会耐心指导。
回复

使用道具 举报

0

主题

25

帖子

65

积分

2018-9-9 14:43:50 显示全部楼层
支持研发小姐姐!
回复

使用道具 举报

0

主题

13

帖子

65

积分

2018-9-10 20:23:16 显示全部楼层
赞赞赞
回复

使用道具 举报

0

主题

2

帖子

10

积分

2018-11-20 11:56:07 显示全部楼层
魅族 MX4:通过描二维码和本地安装两种方式均无反应,请问这个是什么情况

点评

是提示安装失败吗  详情 回复 发表于 2018-11-22 10:01
回复

使用道具 举报

0

主题

2

帖子

10

积分

2018-11-20 14:28:37 显示全部楼层
魅族 MX4,android5.1:通过描二维码和本地安装两种方式均无反应,请问这个是什么情况,然后在别的机型上面安装这个调试器时发现,在别的机型上面在“快应用预览版”这一栏显示的是一个下拉(spinner),而我的却是一个文本(textview),请问这是什么情况 cc.jpg QQ图片20181120115055.jpg
回复

使用道具 举报

4

主题

23

帖子

390

积分

 楼主| 2018-11-22 10:01:40 显示全部楼层
leonaccess 发表于 2018-11-20 11:56 魅族 MX4:通过描二维码和本地安装两种方式均无反应,请问这个是什么情况 ...
是提示安装失败吗
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册