线上Debug方法 & HTTPS基本原理

线上Debug方法

今天胡老师问了我这么一个问题：在一个线上的环境中出现bug，如何用线下的环境进行修改测试，或者说如何获取线上的DOM结构。经过测试，获得了两种方法可以达到这样的效果：直接测试和间接测试。以下针对这两种方法详细进行说明并对比。

直接Debug

这里主要使用Chrome RemoteDebugging
安卓远程调试目前支持所有操作系统（Windows,Mac, Linux, and Chrome OS.）中调试，支持：

1. 调试站点的页面
2. 调试安卓原生App中的WebView
3. 实时将安卓设备的屏幕图像同步显示到开发机器。
4. 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。

使用方法：

• 使用Android手机连接电脑并打开开发者选项，进入USB调试；
• 连接上电脑后，在电脑上打开Chrome浏览器的菜单– 更多工具
• 检查设备（Chromemenu > More tools > Inspect Devices），或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect；
• 然后选中移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面，点击inspect即可打开DevTools，点击reload可重新加载当前的调试页面，点击focus tab可将标签页置顶，close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。
  点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试。
  注：如果发现打开的DevTool为空白且刷新无效，请翻墙。

间接Debug

PC端可以直接通过URL访问源码，可以直接通过Chrome等浏览器的调试工具进行调试。本篇主要讲解移动端的Debug。
移动端Debug，就是在移动端进行访问线上环境时，将手机端的ip地址和端口匹配PC端的抓包工具，从而当移动端进行请求时，可以在PC端模拟网络，抓取对应的HTTP，获取到对应的URL，此处选择Charles进行抓包，具体操作如下：

• 配置 Charles 根证书
  

系统默认是不信任 Charles 的证书的，此时对证书右键，在弹出的下拉菜单中选择『显示简介』，点击使用此证书时，把使用系统默认改为始终信任。

• 安装SSL证书到手机设备上
  点击 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device

  对于HTTP请求：

  1. 若只针对移动端，将”Proxy” 中”Mac OS Proxy”取消，否则为开启本机的系统代理，不光移动端请求通过代理，PC端的操作也通过代理；
  2. 保证移动端和PC端处于同一局域网，然后将移动端的IP地址改为PC端的IP地址；
  3. 在Charles中选择 “Proxy” -> “Proxy Settings”，在区中选中”Enable transparent HTTP proxying”并设置HTTP Proxy 中端口号为8888（一般情况下选择此端口），并在移动端改成对应的端口号；
  4. 第一次连上代理后，Charles会跳出提示框询问是否可以在刚刚设置的IP和端口上设置代理，点击”allow”即可；

  对于HTTPS请求：
  
  打开后勾选Enable SSL Proxying,点击添加，弹出对话框，Host 表示你要抓取的 ip 地址或是链接，Port 填写 443 即可：

Charles 主要提供两种查看封包的视图，分别名为 “Structure”和 “Sequence”：
a.Structure 视图将网络请求按访问的域名分类；
b.Sequence 视图将网络请求按访问的时间排序。

其中Sequence中的filter可以对URL进行过滤，方便查找；

直接Debug和间接Debug对比

直接Debug：
1. 可以实时进行屏幕投影，可以实时的获取界面内容。
2. 利用端口转发，可以在 Android 设备上查看开发计算机网络服务器中的内容。
3. 如果网络服务器正在使用自定义域名，可以将 Android 设备设置为访问位于具有自定义域名映射的网域中的内容。

间接Debug（以Charles为例）：

1.过滤：
在 Charles 的菜单栏选择 Proxy->Recording Settings，然后选择 Include 栏，选择Add，然后填入需要监控的协议，主机地址，端口号,这样就达到了过滤的目的。
2.断点：
在Charles发起一个请求的时候，我们是可以给某个请求打一个断点的，然后来观察或者修改请求或者返回的内容，但是在这过程中药注意请求的超时时间问题。要针对某一个请求设置断点，只需要在这个请求网址右击选择Breakpoints就可以断点某一个请求了。
3.模拟网速慢：
如果在开发的时候我们想要模拟一下网络慢的情况，这时候Charles他是可以帮助到你的，在Proxy->Throttle Setting，然后选择Enable Throttling，在Throttle Preset下选择网络类型即可，具体设置你可以自行拿捏。
4.请求重定向：
请求重定向的作用是什么呢？开发中一般都是测试环境，如果我们想对比一下和线上版本的区别的话，可以讲测试的请求重定向到正式环境下。
5.内容替换：
有时候我们会测一下请求的参数不同会带来不同的返回结果以测试是否达到业务需求，或者需要不同的返回结果来验证我们对数据的处理是否正确，这时候需要后台的同事配合，但是有了Charles，我们可以自己把控接口返回来的内容，比如数据的空与否，数据的长短等等。在Tools->Rewrite Settings下：

HTTPS基本原理

• HTTPS的基本原理
  
  
  • 客户端发送HTTPS请求：
    用户在浏览器中输入HTTPS的网站，连接到server的port 443
  • 服务器的配置：
    采用HTTPS协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl就是个不错的选择，有1年的免费服务)。这套证书其实就是一对公钥和私钥。如果对公钥和私钥不太理解，可以想象成一把钥匙和一个锁头，只是全世界只有你一个人有这把钥匙，你可以把锁头给别人，别人可以用这个锁把重要的东西锁起来，然后发给你，因为只有你一个人有这把钥匙，所以只有你才能看到被这把锁锁起来的东西。
  • 传送证书：
    传输公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。
  • 客户端解析证书：
    这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值。然后用证书对该随机值进行加密。就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，不然看不到被锁住的内容。
  • 传送加密信息：
    这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。
  • 服务段解密信息
    服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。
  • 传输加密后的信息
    这部分信息是服务段用私钥加密后的信息，可以在客户端被还原
  • 客户端解密信息
    客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。整个过程第三方即使监听到了数据，也束手无策。

其中，服务器端用非对称算法生成public和private密钥；客户端生成随机数为Hash算法生成。
常见的算法包括：
非对称加密算法：RSA，DSA/DSS
对称加密算法：AES，RC4，3DES
HASH算法：MD5，SHA1，SHA256
简而言之：
服务器 用RSA生成公钥和私钥

把公钥放在证书里发送给客户端，私钥自己保存；
客户端首先向一个权威的服务器检查证书的合法性，如果证书合法，客户端产生一段随机数，这个随机数就作为通信的密钥，我们称之为对称密钥，用公钥加密这段随机数，然后发送到服务器；
服务器用密钥解密获取对称密钥，然后，双方就已对称密钥进行加密解密通信了。