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

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

3
回复
562
查看
[复制链接]

2

主题

12

帖子

370

积分

 楼主| 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

主题

4

帖子

20

积分

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

使用道具 举报

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