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

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

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