|
本帖最后由 欧巴宾 于 2018-9-11 16:20 编辑
各位亲爱的开发者，大家期待的最新1020版调试器发布啦！
--------------------
上个1010版本，我们收到很多开发者对于调试器的吐槽：
- Netowork面板：无法查看fetch网络请求；
- console面板：输出变量时，无法展开查看内部属性；
- Source面板：断点偶发添加不上，无法调试JS；
对于上述与其他细节问题，我们在这个1020版本已经修复！
--------------------
除此之外，为了更多的满足开发者的需求，我们还增加了几项更赞的功能，比如：
- Elements面板：支持修改CSS选择器样式，修改元素属性，编辑HTML等功能
- 修改源码时，仅重新加载当前页，无需重新加载rpk
- 通过USB线连接来调试，这种方式不再要求手机和电脑在同一局域网，也无需扫描二维码
- 调试器添加设置选项-等待devTools连接，可断点调试首页
--------------------
为了让开发者了解调试器的最新功能，我们制作了下面功能的动态图，大家可以一睹为快：
版本要求：
注意：1020平台必须用最新的调试器，最新调试器可以调试之前版本的平台
效果体验如下↓
1. Network 面板
可以监控fetch请求和其他没有被缓存的请求
2. Console 面板
输出变量时，可以展开查看内部属性
3. Source 面板
3.1 添加断点，刷新浏览器断点生效
3.2 修改源码时，仅重新加载当前页，无需重新加载rpk
- 在之前版开发时，如果npm run watch，每次保存修改都会回到首页，不方便调试。
- 新版调试时可以设置应用更新策略，更新rpk仅刷新当前页
开发调试效果如下↓
步骤如下：
1）手机快应用调试器 中选择‘’设置→应用更新策略 → 仅刷新页面“
2）编辑器修改当前页然后运行npm run build ；若已经运行 npm run watch ，直接保存修改
注：如果想刷新整个应用，可以关闭运行的快应用然后重新运行rpk
3.3 应用启动时调试
如果想调试应用启动时运行的代码，比如onInit ,app.ux，可以先开启 调试器->设置->调试->“等待DevTools连接”，然后在要 在代码里添加“debugger”，效果如下：
如果想禁用source map 可以build时执行 npm run build -- --env.disable-source-map
4. Elements面板：修改CSS选择器样式，修改元素属性，编辑HTML
5. 通过USB连接电脑调试
此方式不需要手机和电脑在同一局域网，也不需要扫描二维码
步骤如下：1）手机设置 →开发者选项 → 开启USB调试
2) 手机快应用调试器 选择“开启USB调试”
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平台都需要安装，平台更新调试也会一起更新。此处下载
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版修复
对于收集到的问题，我们会非常迅猛的发版修正~
| 
