Hybrid App调试用Inspect还是Charles

八青妹
364 阅读9分钟

1. 前言

首先讲一下八青妹在开发中遇到的场景： Android外壳内嵌h5，h5与原生有交互，原生和h5都调用了三方。

八青妹在团队中推荐前端和测试熟悉Charles工具，但是部分前端表示Inpesct就够用了，并不用了解Charles。八青妹只能劝其“技多不压身”，并耐心举例项目中需要使用到Charles的场景。

首先认识下Inspect和Charles，如果对这两个工具都熟悉的朋友可以跳转到选Inspect还是Charles

2. 了解Inspect

2.1 Inspect定义

inspect 是一个内置于chrome的远程调试指令，它支持调试所有移动端基于chrome内核的webview的调试，方便我们在通过抓包的方式无法排查问题的时候，可以用它来链接手机进行调试、查看命令行和网络接口，甚至于打断点。方便我们进行代码的调试，排查问题。（注：只用于调试安卓）

也就是使用的前提是：Android App里面的浏览器内核要是chromium，在PC端，使用的浏览器可以是Chrome或者Edge。

2.2 Inspect如何使用

1. 首先，在浏览器上输入chrome://inspect

打开的界面如下所示

image.png

2. 打开手机的开发者模式

在手机的设置中输入开发者模式进行搜索，没有搜索到的，要看手机的型号搜索下对应型号打开开发者模式的方式。例如华为手机，打开设置，滑到最底部，找到关于手机点击，然后快速多次点击版本号，即可打开手机的开发者模式。再回到设置页，顶部搜索栏输入开发者，出现开发人员选项，进入，找到USB调试开启下。

3. 电脑和手机用数据线连接

用数据线连接成功后，弹出允许框，要勾选下允许。

image.png

4. 调试

连接成功后,打开要调试的网页，或者是app。这里举例打开手机浏览器，在Inspect的devices中会看到可进行inspect的页面，在手机浏览器上打开百度,点击inspect，会打开一个新的页面，如下：

image.png

打开的页面就是前端开发人员最最常见的浏览器开发者工具，在这里，可以直接看到发起的所有网络请求，可以看到控制台报错信息，可以看到浏览器存储信息等等，方便前端人员去定位问题。

在控制台，可以直接去调用android提供的方法，去查看android提供的接口有无正常返回值，这个在前端与原生交互的时候很重要，不要闭着眼睛就推锅给安卓开发哟，也许人家没毛病呢，哈哈，咱主打一个讲证据！

注意📢：如果是inspect某个app，这里的app是要允许调试的，有些app为了防止被抓包，会设置不允许调试，尤其是在生产环境。所以这个得跟安卓开发人员沟通好，确保所要调试的app是允许被调试的。

3. 了解Charles

3.1 Charles是什么

Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).——来自官网

翻译下：Charles 是一个 HTTP 代理/HTTP 监视器/反向代理,它使开发人员能够查看他们的计算机与互联网之间的所有 HTTP 和 SSL/HTTPS 流量。这包括请求、响应以及 HTTP 头部(包含 cookies 和缓存信息)。

Charles 是一款网络调试工具,应用于Web和移动应用程序的开发和测试领域。

3.2 Charles的工作原理

image.png

  • ①. 由客户端发送请求
  • ②. Charles接收再发送给服务器
  • ③. 服务端返回请求结果给Charles
  • ④. 由Charles转发给客户端

3.3 Charles下载与安装

官方下载地址,下载成功后一路安装下来就好。安装完成后，在网上找下Charles破解工具，按照网站上提供的方式破解一下，八青妹这里就不赘述了。

3.4 信任Charles证书

3.41 浏览器信任Charles

如果访问地址是https打头的网站，那就必须要下载Charles证书了。

image.png

证书下载之后需要将电脑信任一下该证书。

Mac电脑在钥匙串访问中信任Charles证书： image.png

Windows电脑要在证书导入向导中添加： image.png

现在电脑浏览器信任证书了，如果要访问手机端的https打头的浏览器网站，那么手机上也要添加该证书。

最直接的方式，就是发给手机端的微信接收，用微信自带的证书安装器进行安装。

image.png image.png

或者使用charles提供的下载证书的办法

image.png 也就是手机网络开代理，代理地址为上图提供的（本地域名和端口号按照自己的来哈），浏览器输入chls.pro/ssl，即在手机端下载了该证书。

image.png

下载完后点击该证书进行安装，手机上也添加了证书之后，发现还是不能继续抓包的话，要根据手机型号，找到该手机安装证书的位置，举例华为手机：在手机上找到设置→安全→更多安全设置→加密和凭据→从存储设备安装，如果默认打开的路径没有找到证书，则切换左上角的选择方式，找到自己下载的地方。这里使用华为默认浏览器进行下载，在Browser下即可找到，如下图所示，点击该证书，验证身份后即可进行安装。

windows电脑要注意防火墙，设置下允许应用通过Windows Defender防火墙进行通信

image.png

3.42 App信任Charles

上述操作，可以访问浏览器了，但是访问App的时候，会发现并不能顺利抓包，这是因为APP不信任该证书，所以还是做不了网络代理，这个时候，只能请Android开发的伙伴们将你的Charles证书打包进去，信任一下。

  1. 引入CA证书

右击项目的res文件->New->Android Resource Directory->raw，然后将CA证书拷贝到该raw目录下。

  1. 新建res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>  
<network-security-config>  
    <debug-overrides>  
        <trust-anchors>  
            <certificates src="@raw/your_charles_cert" />  
        </trust-anchors>  
    </debug-overrides>  
</network-security-config>
  1. 在清单文件里添加该配置
<?xml version="1.0" encoding="utf-8"?>
<manifest ......>
<application  
    android:networkSecurityConfig="@xml/network_security_config"  
       ......>
......
......
<application>
<manifest>

4. 选Inspect还是Charles?

介绍完Inspect和Charles工具后，八青妹列举下在Hybird App中使用Inspect和Charles的场景。

4.1 查看Android接口是否能正常调用

  • Inspect

例如安卓提供了一个接口可以让你获取当前的设备ID，前端可以通过 window.android?.getDeviceId()来获取。这时候，直接在Inspect打开的控制台中，输入 window.android?.getDeviceId()，就可以看到结果了。

4.2 查看前端控制台报错

  • Inspect

如果在在App内出现页面点击了某个按钮后没有反应，或者内置的h5页面白屏了，那么十有八九是前端页面报错了。这个时候，不要多想，手机和电脑接上数据线，用Inspect看下控制台报错。

4.3 前端代码实时调试

  • Charles

这里要了解下Charles的Map Remote远程映射功能。

Map Remote 工具根据配置的映射更改请求位置，以便从新位置提供响应，就好像那是原始请求一样。 此映射使您能够从另一个站点为一个站点的全部或部分提供服务。例如如果您有一个站点的开发版本，并且希望能够浏览实时站点以及一些从开发中提供的请求，则 Map Remote 非常有用。例如，您可能希望从开发服务器提供 css 和 images 目录。使用 live.com/css/ 到 dev.com/css/ 或 live.com/*.css 到 dev.com 的映射。——官网

我们想要的是，App里面内置的URL不是来自于远程服务器，而是来自于我们本地启动的项目，例如：test.baqingmei.com 映射为 http://192.268.2.17:8080。

这样我们在本地更改代码后，服务刷新，则App里的h5也进行了更新，方便调试。

  1. 点击Tools→Map Remote→勾选Enable Map Remote
  2. 点击Add
  3. 填写原来的请求地址（Map From） test.baqingmei.com
  4. 填写本机调试环境地址（Map To） http://192.268.2.17:8080
  5. 点击OK

4.4 抓包三方请求

  • Charles

用Inspect弊端就是当跳转到三方页面的时候，就抓获不到了。在之前八青妹的文章中，有提到接口自动化，可以用Apifox实现，但是有时候接口并不仅仅只存在于单个服务中，有可能会调用三方的链接，然后继续进行交互，最后拿到结果，重定向到原来的页面。

举个例子：在h5的页面中，需要调用上上签（电子签约云平台）的签署页面，在该三方页面上完成签名和确认操作。这些操作调用的接口，以及接口的传参响应都可以在Charles中抓取到，在非生产环境的时候，可以用接口自动化模拟签署的这一过程。

5. 总结

Inspect和Charles都是很好的调试工具，它们的特长都很明显，取其长避其短，根据场景去判断你需要的工具是哪个，毕竟两个工具的定位就不一样。对于前端开发来说，至少对于Hybrid App中开发h5的同学们来说，八青妹认为掌握这两种工具还是很有必要的。当然，如果不喜欢Charles喜欢Fiddler也可以的。只要是在项目需要的时候，能找到一款合适的抓包或者定位的工具，并熟练掌握，都值得鼓励。

另外，如果想要开发者工具中的console控制台功能，又想连接Charles抓包，还有一个办法就是利用vconsole插件和charles的rewrite功能，步骤如下：

  1. 点击Tools→Rewirte→勾选Enable Rewirte
  2. 点击Add，更改Name
  3. 在Location中点击Add添加目标地址
  4. 在Rule中，点击Add添加正则替换内容，勾选方式为Response
<head><script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script><script>var vConsole = new VConsole();</script>

当然，也可以在你的项目中直接引入这个插件，在生产环境的时候开启，八青妹举例是为了补充说明Charles的Rewrite功能。对于测试来说，Charles这个工具会更熟悉一些。

avatar
文章
阅读
粉丝