V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
wuchangming89
V2EX  ›  JavaScript

分享:真机页面调试+抓包,调试微信生产环境 HTTPS 页面工具集成。(weinre + AnyProxy)

  •  3
     
  •   wuchangming89 · 2016-07-26 13:04:16 +08:00 · 14871 次点击
    这是一个创建于 3024 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目地址在 github 上: https://github.com/wuchangming/spy-debugger

    GitHub stars GitHub forks

    关于 spy-debugger

    一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端 webview (如:微信, HybirdApp 等),支持: HTTP/HTTPS

    Demo

    调试界面

    demo.png

    抓包界面

    AnyProxy.jpg

    特性

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

    安装

    Windows 下

    npm install spy-debugger -g
    

    Mac 下

    sudo npm install spy-debugger -g
    

    三分钟上手

    第一步:手机和 PC 保持在同一网络下(比如同时连到一个 Wi-Fi 下)

    第二步:命令行输入spy-debugger,按命令行提示用浏览器打开相应地址。

    第三步:设置手机的 HTTP 代理,代理 IP 地址设置为 PC 的 IP 地址,端口为spy-debugger的启动端口(默认端口: 9888)。

    第四步:安装证书。注:手机必须先设置完代理后再通过(非微信)手机浏览器访问http://spydebugger.com/cert安装证书(手机首次调试需要安装证书,已安装了证书的手机无需重复安装)。

    第五步:用手机浏览器访问你要调试的页面即可。

    自定义选项

    端口

    (默认端口: 9888)

    spy-debugger -p 8888
    

    设置外部代理(默认使用 AnyProxy )

    spy-debugger -e http://127.0.0.1:8888
    

    spy-debugger 内置 AnyProxy 提供抓包功能,但是也可通过设置外部代理和其它抓包代理工具一起使用,如: Charles 、 Fiddler 。

    是否让 weinre 监控 iframe 加载的页面

    (默认: false)

    spy-debugger -i true
    

    是否只拦截浏览器发起的 https 请求

    (默认: true)

    spy-debugger -b false
    

    有些浏览器发出的 connect 请求没有正确的携带 userAgent ,这个判断有时候会出错,如UC 浏览器。这个时候需要设置为 false 。大多数情况建议启用默认配置: true ,由于目前大量 App 应用自身(非 WebView )发出的请求会使用到 SSL pinning 技术,自定义的证书将不能通过 app 的证书校验。

    是否允许 HTTP 缓存

    (默认: false)

    spy-debugger -c true
    

    更多

    spy-debugger原理是集成了weinre,简化了weinre需要给每个调试的页面添加 js 代码。spy-debugger原理是拦截所有 html 页面请求注入weinre所需要的 js 代码。让页面调试更加方便。

    30 条回复    2016-12-05 13:18:32 +08:00
    wuchangming89
        1
    wuchangming89  
    OP
       2016-07-26 13:07:54 +08:00
    不仅限于微信,所有手机端的页面都支持
    jsser
        2
    jsser  
       2016-07-26 13:16:45 +08:00
    👍
    wuchangming89
        3
    wuchangming89  
    OP
       2016-07-26 13:22:55 +08:00
    @jsser Thanks
    iyaozhen
        4
    iyaozhen  
       2016-07-26 13:25:09 +08:00
    赞!
    wuchangming89
        5
    wuchangming89  
    OP
       2016-07-26 13:27:48 +08:00
    @iyaozhen , Thanks 。
    使用中有遇到什么问题可以和我反馈。尽量做到更好
    https://github.com/wuchangming/spy-debugger/issues
    laoyuan
        6
    laoyuan  
       2016-07-26 13:40:30 +08:00
    好,之前我用 Charles + Proxifier 调试,现在可以扔了!
    wuchangming89
        7
    wuchangming89  
    OP
       2016-07-26 13:42:20 +08:00
    @laoyuan : )
    bobsam
        8
    bobsam  
       2016-07-26 14:12:58 +08:00
    看上去挺不错的!先试用看看效果~
    wuchangming89
        9
    wuchangming89  
    OP
       2016-07-26 14:32:45 +08:00
    @bobsam 欢迎试用 : )
    wuchangming89
        10
    wuchangming89  
    OP
       2016-07-26 15:40:36 +08:00
    长时间使用, AnyProxy 可能导致 crash ,不知道 AnyProxy 什么时候能更新一版本
    xmpx310
        11
    xmpx310  
       2016-07-26 16:15:00 +08:00
    有 fiddler 好用吗
    yangxiongguo
        12
    yangxiongguo  
       2016-07-26 16:16:50 +08:00 via iPhone
    mark
    wuchangming89
        13
    wuchangming89  
    OP
       2016-07-26 16:21:55 +08:00
    @xmpx310 ,看场景,如果你要调试页面。或者看 js 的 log 。 fiddler 就没办法了
    wuchangming89
        14
    wuchangming89  
    OP
       2016-07-26 16:31:48 +08:00
    @xmpx310 ,但 spy-debugger 也可以结合 fiddler 一起用。

    https://github.com/wuchangming/spy-debugger#设置外部代理默认使用 anyproxy

    启动方式:
    spy-debugger -e http://127.0.0.1:[fiddler 端口]
    yushiro
        15
    yushiro  
       2016-07-26 17:08:49 +08:00 via iPhone
    这个可以有,非常不错的我工具
    wuchangming89
        16
    wuchangming89  
    OP
       2016-07-26 17:23:03 +08:00
    @yushiro : )
    TangMonk
        17
    TangMonk  
       2016-07-26 17:27:13 +08:00
    现在用的这个,微信官方出的,感觉还行
    wuchangming89
        18
    wuchangming89  
    OP
       2016-07-26 17:33:32 +08:00
    @TangMonk ,嗯,这个不支持 HTTPS
    wuchangming89
        19
    wuchangming89  
    OP
       2016-07-26 17:34:14 +08:00
    @TangMonk 而且没有找到开源代码。。本来想改它的。
    fhefh
        20
    fhefh  
       2016-07-26 21:48:29 +08:00
    太棒了
    xerr
        21
    xerr  
       2016-07-27 07:22:35 +08:00 via iPhone
    mark
    tonyyu
        22
    tonyyu  
       2016-07-27 08:40:14 +08:00
    真棒!!!
    ak47947
        23
    ak47947  
       2016-07-27 08:47:45 +08:00
    回复只为点赞!
    wuchangming89
        24
    wuchangming89  
    OP
       2016-07-27 09:09:25 +08:00
    @ak47947 ,哈哈,谢谢!
    quix
        25
    quix  
       2016-07-28 17:06:34 +08:00
    @wuchangming89 最新的版本支持使用 chrome inspector 远程调试 可以支持 https 的
    quix
        26
    quix  
       2016-07-28 17:07:41 +08:00
    weinre 比较弱..我建议还是用 xposed 给所有的 webview 都开启 remote debug 然后用 chrome 的 remote inspector 调试
    wuchangming89
        27
    wuchangming89  
    OP
       2016-07-28 17:59:15 +08:00
    @quix ,嗯, inspector 是安卓调试里最方便实用的。你这方法我有空研究下。不过对我这种安卓小白来说,难度有点大。
    mingyun
        28
    mingyun  
       2016-11-20 20:28:32 +08:00
    厉害了
    litpen
        29
    litpen  
       2016-12-05 10:54:02 +08:00
    简直就是解决手机调试的一枚银弹!
    以前都要看平台的,这一个方法解决了所有平台调试问题,还解决了 https 不能调试的问题。
    wuchangming89
        30
    wuchangming89  
    OP
       2016-12-05 13:18:32 +08:00
    @litpen 谢谢支持。使用过程中有问题,欢迎提 issue ,我会尽力去完善该项目。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3083 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 14:06 · PVG 22:06 · LAX 06:06 · JFK 09:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.