Debug调试工具
简介
功能简介
Debug调试工具支持日志查询和前端页面调试：
- 日志查询：支持查看前端日志、JSBridge API执行日志、网络日志、Cookie、localStorage等日志，同时可以在调试工具中动态执行JS命令，覆盖一般前端日志工具，例如覆盖Eruda的全部功能，请参见查看日志。
- 前端页面调试：提供在浙里办APP环境内调试前端页面的能力。
之前的模式中，由于Chrome中不含浙里办APP运行环境，开发者需要在Chrome中调试不含JSBridge API的页面功能，调试完成后加上JSBridge API再在浙里办APP中运行查看效果。
通过Debug调试工具可以直接在浙里办APP环境中进行页面开发，模拟端侧环境运行前端页面，请参见前端页面调试。
支持在Mac和Windows系统中安装Debug调试工具。
概览
1：连接设备，单击打开二维码，通过浙里办APP扫码连接Debug工具。
2：红色Tag表示H5请求。
3：请求状态码：
- 200~299为绿色表示请求成功。
- 300~399为黄色表示将进一步请求。
- 400及以上为红色表示请求失败。
4：蓝色Tag表示请求类型：
- HTML为链接请求
- XHR为页面内的网络请求，包含请求的所有信息，排查问题时重点关注XHR。
- 没有Tag表示除HTML、XHR以外的所有请求，包括CSS、JS、图片、字体等下载请求。
5：H5页面调试，请参见H5页面调试。
6：日志筛选按钮，筛选要查看的日志类型。
7：功能按钮
| 功能 | 说明 |
| 导出日志 | 将全量日志导出到本地。 |
| 导入日志 | 将本地前端日志导入Debug工具进行问题排查。 |
| 清空缓存 | 清除前端资源（页面JS、CSS、图片等）、Cookie（用户登录信息）。 |
| 显示Cookie | 显示前端页面Cookie。 |
显示localStorage |
显示前端页面的localStorage存储信息。 |
| JSAPI调试 | 显示浙里办APP当前页面支持的JSBridge API，支持编辑和调试API。 |
8：冻结当前日志页面按钮。
9：命令执行框，执行前端页面JS命令。
10：JSBridge API调试按钮，无需连接Debug调试工具即可实时调试JSBridge API。
准备工作
使用Debug工具之前，您需要完成以下准备工作：
手机安装浙里办APP，需要通过浙里办APP扫码连接Debug调试工具。
下载并安装Debug工具，下载地址：
- Windows：ZWEurope 3.1.0
- Mac：ZWEurope 3.1.0
查看日志
支持查看前端日志、JSBridge API执行日志、网络日志、Cookie、localStorage等日志，同时可以在调试工具中动态执行JS命令，覆盖一般前端日志工具，例如覆盖Eruda的全部功能。
操作步骤
- 打开Debug调试工具。
- 单击左侧导航栏设备绑定，打开连接码。
- 手机登录浙里办APP，打开扫码功能，扫码连接Debug工具。
连接成功后进入查看日志页面，Debug工具自动拉取浙里办APP支持的JSBridge API。
说明
要求手机和Debug工具处于同一局域网中，否则无法扫码连接Debug工具。
1.1：连接设备，单击打开二维码，通过浙里办APP扫码连接Debug工具。
2.2：红色Tag是h5请求。
3.3：状态码：
- 200~299为绿色表示请求成功
- 300~399为黄色表示将进一步请求
- 400及以上为红色表示请求失败
4.4：蓝色Tag表示请求类型：
- HTML为链接请求
- XHR为页面内的网络请求，包含请求的所有信息，排查问题时重点关注XHR。
- 没有Tag表示除HTML、XHR以外的所有请求，包括CSS、JS、图片、字体等下载请求。
5.5：H5页面调试，请参见H5页面调试。
6.6：日志筛选按钮，筛选要查看的日志类型。
7.7：设置按钮
| 功能 | 说明 |
| 导出日志 | 将全量日志导出到本地。 |
| 导入日志 | 将本地前端日志导入Debug工具进行问题排查。 |
清空缓存 |
清除前端资源（页面JS、CSS、图片等）、Cookie（用户登录信息）。 |
| 显示Cookie | 显示前端页面Cookie。 |
| 显示localStorage | 显示前端页面的localStorage存储信息。 |
| JSAPI调试 | 显示浙里办APP当前页面支持的JSBridge API，支持编辑和调试API。 |
8.8：冻结日志页面按钮。
9.9：打开浙里办APP主页时，输入前端页面URL地址（例如http://www.baidu.com），回车跳转到相应页面；进入页面后，可直接执行JS命令（例如location.href = 'http://www.baidu.com'）跳转到相应页面。
10.10：JSBridge API调试按钮，无需连接Debug调试工具即可实时调试JSBridge API。
4.在JSBridge API列表中，单击日志列表中的日志查看日志详情。
前端页面调试
提供在浙里办APP环境内调试前端页面的能力。之前的模式中，由于Chrome中不含浙里办APP运行环境，开发者需要在Chrome中调试不含JSBridge API的页面功能，调试完成后加上JSBridge API再在浙里办APP中运行查看效果。通过Debug调试工具可以直接在浙里办APP环境中进行页面开发，模拟端侧环境运行前端页面。
注意事项
浙里办APP 安卓6.6.0、IOS 6.5.0及以上版本支持调试功能。
调试步骤
- 打开Debug调试工具。
- 单击左侧导航栏设备绑定，打开连接码。
- 手机登录浙里办APP，打开扫码功能，扫码连接Debug调试工具。
连接成功后进入查看日志页面，Debug调试工具自动拉取浙里办APP支持的JSBridge API。
说明
- 要求手机和Debug调试工具处于同一局域网中，否则无法扫码连接Debug调试工具。
单击左侧导航栏调试，在地址框中输入本地应用地址或者应用开发管理平台生成的应用地址，单击go进入调试页面。
调试页面分为实时页面效果页和代码调试页：
- 1：页面前进按钮。
- 2：页面后退按钮。
- 3：刷新当前页面按钮。
- 4：代码调试页。
本示例以调试scan扫码接口为例，介绍如何使用Debug工具调试JSBridge API。在地址输入框输入待调试应用地址，单击go。
- 单击扫一扫启用手机扫码功能，扫任一可用的二维码，Debug调试工具显示扫码结果。
调试JSBridge API
下载安装Debug调试工具后，可以在调试工具中查看和调试全量JSBridge API。
前提条件
已下载和安装Debug调试，下载地址：
- Windows：ZWEurope 3.1.0
- Mac：ZWEurope 3.1.0
操作步骤
- 打开Debug调试工具。
- 单击左侧导航栏设备绑定，打开连接码，通过手机浙里办APP扫码连接Debug调试工具。
- 单击JSAPI按钮，打开调试页面。
- 在JSAPI调试列表单击目标JSBridge API（例如sms API），右侧调试区域同步显示对应JSBridge API的调用示例。
- 单击扫码查看打开二维码，手机登录浙里办APP并扫码即可对JSBridge API功能进行调试。
说明
支持在调试页面更改JSBridge API入参，然后通过手机扫码实时验证调试结果。
单击点击调试按钮，系统自动跳转到发送短信页面。
H5页面调试
开发者可以通过Debug工具查看H5页面的请求、JS Log、Cookie等，进行H5页面调试。
前提条件
已下载和安装Debug调试，下载地址：
- Windows：ZWEurope 3.1.0
- Mac：ZWEurope 3.1.0
Debug工具界面概览
- 基本界面
- 筛选界面
连接Debug工具
- 打开Debug工具。
- 单击左侧导航栏中的设备绑定，打开连接码。
- 通过手机中的浙里办APP扫码功能，扫码连接Debug工具。
连接成功，Debug工具自动拉取浙里办对应功能的JSAPI。
说明
要求手机和Debug工具处于同一局域网中，否则无法扫码连接Debug工具。
- 1，单击按钮打开二维码，通过浙里办APP扫码连接Debug工具。
- 2，红色Tag是h5请求。
- 3，状态码：
- 200~299为绿色表示请求成功
- 300~399为黄色表示将进一步请求
- 400及以上为红色表示请求失败
- 4，蓝色Tag表示请求类型：
- HTML为链接请求
- XHR为页面内的网络请求，包含请求的所有信息，排查问题时重点关注XHR。
- 没有Tag表示除HTML、XHR以外的所有请求，包括CSS、JS、图片、字体等下载请求。
- 单击左侧导航栏的调试，输入待调试页面的URL地址，单击go进行调试。
