一、抓包、移动端web开发常见问题

  1. PC端模拟手机调试, 并不能实际测试兼容性
  2. 手机上调试不能改变样式,断点调试. 每次需要更改代码,再刷新,比较麻烦.

  3. 查看分析项目的请求过程,需要进行抓包查看.

    二、spy-debugger 真机调试

  4. 特性

    1. 页面调试+抓包
    2. 操作简单,支持HTTPS
    3. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy
    4. 自动忽略原生App发起的https请求,只拦截webview发起的https请求.对使用了SSL pinning技术的原生App不造成任何影响
    5. 可以配合其他代理工具一起使用(默认使用AnyProxy)

  5. 安装和使用(npm安装)

    a. 安装:
    全局安装 npm install -g spy-debugger
    局部安装 npm install spy-debugger
    b. 启动:
    spy-debugger start (电脑浏览器弹出http://127.0.0.1:50038/调试界面)
    局部安装的情况下,启动需要加 node_modules/.bin
    image.png
    3. 设置手机的HTTP代理
    代理的地址为PC的IP地址,代理的端口为 spy-debugger的启动端口(默认端口为:9888)
    如果要指定端口: spy-debugger -p 8888
    Android设置步骤: 设置-WLAN-长安选中网络-修改网络-高级-代理设置-手动
    IOS 设置代理: 设置-无线局域网 - 选中网络 - HTTP代理 - 手动

  6. 手机安装证书(node-mitmproxy CA根证书)

    • 执行spy-debugger initCA 生成证书。证书会生成在用户根目录的node-mitmproxy文件夹下，如： /Users/node-mitmproxy
    • 把node-mitmproxy文件夹下的 node-mitmproxy.ca.crt 传到手机上进行安装

  7. 开始调试

    1.   用手机浏览器访问你要调试的页面即可。可在电脑浏览器[http://127.0.0.1:50038/](http://127.0.0.1:50038/)调试界面进行更改.