智能小程序档案馆——再谈远程调试

1,969 阅读3分钟

在档案馆系列之前的文章里,我们曾经有一期提到了远程调试,那篇文章为您介绍了sConsole、安卓真机调试和远程调试三种调试方法。今天我们将换一个角度,继续谈一下远程调试,到底还有哪些不为大家所知的好处。

远程调试使用方法便捷:扫码使用

只需扫码便可调试小程序,你就可以使用远程调试去调试小程序真机运行时的异常情况。

远程调试的操作简单

  • 百度 App 客户端的版本在10.13.5及以上。
  • 百度 App 客户端的登陆用户和开发者工具的登陆用户是一用户。
  • 开发者工具和百度 App 客户端在同一局域网内。

若苹果手机和苹果电脑不在同一局域网内,可以通过usb连接苹果电脑进行调试。

使用说明

  1. 登录开发者工具后,生成远程调试二维码。
  2. 百度App扫码后,远程调试窗口打开。

若打不开远程调试,请检查上述三个条件是否全部满足。

图片

功能介绍

远程调试窗口可以分为页面试图、调试器和信息球。

  • 页面视图和客户端中的小程序页面保持同步,展示了小程序页面的运行情况,顶部有刷新和结束调试按钮,帮助开发者刷新小程序页面和退出调试。
  • 调试器集成了Swan、Console、Sources、Network等面板,辅助开发者调试小程序。
  • 信息球中展示了百度App客户端的一些基本信息,如手机型号、系统等,便于开发者校验当前调试的环境信息。

图片

调试器

页面视图和信息球简单易懂,本文中我们将详细看一下调试器的使用。

Swan面板

在Swan面板中,开发者可以查看小程序当前页面的DOM结构。当开发者调试页面时,可以通过修改Swan面板中的Style、CSS信息调试DOM节点。

图片

Console面板

在Console面板中,开发者可以查看小程序代码报错、console输出等打印信息。Console面板的词法域是当前小程序的词法作用域,可以通过Swan API获得辅助的调试信息,如swan.getStorageInfoSync()。

Sources面板

在Source面板中,开发者可以查看 小程序的代码,进行断点调试,如下图所示,开发者可以根据断点,查看小程序的代码执行栈,定位代码执行的异常情况。

图片

Network面板

在Network面板中,开发者可以查看小程序发出的网络请求,如下图所示,远程调试的网络请求是真机发起的,远程调试只是将请求头和请求结果展现给开发者,协助开发者定位swan.request请求的异常情况。

图片

以上就是我们今天要介绍的全部内容~