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

工具分享:移动端真机页面调试工具 spy-debugger 新增功能——页面编辑模式

  •  2
     
  •   wuchangming89 · 2016-11-25 15:11:55 +08:00 · 4913 次点击
    这是一个创建于 2918 天前的主题,其中的信息可能已经有所发展或是发生改变。

    关于 spy-debugger

    一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端 webview (如:微信, HybirdApp 等) HTTP/HTTPS
    GitHub forksGitHub stars
    项目地址: https://github.com/wuchangming/spy-debugger

    新增功能:页面编辑模式

    效果图: spy-debugger-w.gif

    特性

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

    三分钟上手

    第一步:手机和 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 。

    设置页面内容为可编辑模式

    该功能使页面内容修改更加直观方便。 (默认: false)

    spy-debugger -w true
    

    内部实现原理:在需要调试的页面内注入代码:document.body.contentEditable=true。暂不支持使用了 iscroll 框架的页面。

    是否允许 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 代码。让页面调试更加方便。

    9 条回复    2016-11-25 16:19:30 +08:00
    jsser
        1
    jsser  
       2016-11-25 15:15:08 +08:00
    赞~
    397738481
        2
    397738481  
       2016-11-25 15:15:52 +08:00
    6666666666666
    wuchangming89
        3
    wuchangming89  
    OP
       2016-11-25 15:16:17 +08:00
    @397738481
    @jsser
    谢谢~
    Roycom
        4
    Roycom  
       2016-11-25 15:59:15 +08:00
    mark 一下
    SourceMan
        5
    SourceMan  
       2016-11-25 16:10:43 +08:00
    mac 下的安装指令把 sudo 去掉吧, npm 可以不需要 sudo 的,这样避免的权限错乱
    如果有用户需要 sudo ,让他们自己看错误提示再加
    wuchangming89
        6
    wuchangming89  
    OP
       2016-11-25 16:12:20 +08:00
    @SourceMan ,安装到全局是需要的吧?
    SourceMan
        7
    SourceMan  
       2016-11-25 16:17:36 +08:00
    额,不知道大家的习惯,一般大家都 sudo chown -R who:admin /usr/local 了吧?
    意思是文档中还是去掉(基本也没看见 -g 的组件文档写上 sudo )的,有需要的人他们自己再加
    nailuoGG
        8
    nailuoGG  
       2016-11-25 16:18:07 +08:00
    试用后,使用起来方便了很多
    wuchangming89
        9
    wuchangming89  
    OP
       2016-11-25 16:19:30 +08:00
    @nailuoGG 谢谢支持。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1086 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 22:42 · PVG 06:42 · LAX 14:42 · JFK 17:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.