V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
wuchangming89

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

  •  3
     
  •   wuchangming89 · Jul 26, 2016 · 15937 views
    This topic created in 3568 days ago, the information mentioned may be changed or developed.

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

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

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