Skip to content

Home

Jump to bottom
atwxp edited this page Dec 20, 2016 · 3 revisions

Why Do This

1.1 调试工具

从调试工具本身来说，mac 下的 charles 真的不好用，举个例子：

map remote 大家都会用，让我们看看完成这一步骤需要几步：

至少需要点三次，希望的效果是这样输入完映射的规则直接 Save

1.2 调试技术

从调试技术本身来说，在前端我们希望能查看DOM树，执行脚本，打印日志错误信息甚至断点进行调试，然而这些 charles/fiddler 都不具有，造成调试困难

How To Use

全局安装：

npm i idevt -g

1.1 启动命令

idev start

输入 idev start 会打印上图信息，这些信息告诉我们：

  • webui 端口在 8889

  • 手机代理是 172.20.129.29 8888

打开任意这两个链接之一即可打开 webui 界面，idev 会自动把 8888 代理到 webui 的端口 8889

（建议使用第二个链接，方便从浏览器地址栏中看到本机 IP 从而配置手机代理）

1.2 配置手机代理

1.3 Network

接下来使用手机浏览器这里是 safari 打开页面比如 http://xw.qq.com/，可以看到如下图的会话列表

左侧是抓到的访问 http://xw.qq.com 发送的请求：

  • 蓝色的是 HTML

  • 紫色的是 CSS

  • 绿色的是 Javascript

  • 灰色的是 非以上三者

每一列分别对应 请求序号、请求响应状态、请求协议、请求方法、请求 URL、内容类型、服务器端IP(TODO）

1.3.1 Inspector

选中 xw.qq.com 这一行，可以在右侧查看更具体的信息：上面一栏是请求状态栏，下面一栏是响应状态栏

请求状态栏分为：

  • headers

  • cookies

  • webforms：URL 后的 querystring

  • textview：POST 方法发送的数据

响应状态栏分为：

  • headers

  • textview：响应内容(对 HTML/CSS/Javascript 进行了格式化方便查看)

  • syntaxview：对响应内容是 HTML/CSS/Javascript/JSONP/JSON 进行格式化高亮

  • imageview ：预览请求的图片类型

1.3.2 AutoResponder

1、Enable Rules控制是否开启规则映射

2、Add Rule 添加新的规则

3、Import 导入已有的规则

4、Export 导出自己配置的规则

5、Rule Editor 即可以编辑我们规则，包含两部分：pattern/responder

5.1 pattern 支持 正则和URL 匹配

  • 正则：

    • 以 regexp: 开始

    • 后面写上正常的正则表达式即可，不需要//包裹起来

    • 比如 regexp:0\.0\.0\.0:?(443)?

  • URL：写上要匹配的链接即可，比如 www.qq.com/mobi/css/

5.2 responder 支持 URL、脚本、本地文件

  • URL：这个大家都明白

  • 脚本：支持对响应内容做一些自定义的替换，目前支持 html/css/js

    • 对哪种类型执行脚本就需要以内容类型开始 html:/css:/js:yourcode

    • 举个例子：

        (function (data) {
      var str = data.toString();
      return str;
  })

  • 本地文件

    这个也很好理解，比如有时候替换线上 json 到本地 json

1.3.3 TextWizard

提供方便的数据编码转换

1.3.4 Composer

TODO

1.3.5 Vorlon

1、安装

由于没有集成 vorlon，所以需要全局安装 vorlon：

$ npm i vorlon -g

2、修改配置

修改 /usr/local/lib/node_modules/vorlon/Server/config.json 中的 useSSL 字段为 true 即允许 HTTPS

3、执行 vorlon

$ vorlon

4、配置需要使用 vorlon 调试的页面

按 ctrl + s 保存

1.3.6 Filter Url

左下方有一个黑色的输入框，可以过滤请求的 URL ，比如输入 mobi：

1.4 Https

功能：配置 HTTPS 证书，抓包 HTTPS 数据

1、IOS safari 扫一下图中二维码，会弹出下面的提示：

点击 安装/确认 即可

2、勾选 Intercept HTTPS CONNECT 表示解密 HTTPS 数据

1.5 Clear

功能：清除当前会话列表

1.6 Replay

功能：重新发送某个特定请求

TODO

1.7 Vorlon

功能：集成 vorlon，不需要前面所说的全局安装

vorlon 是微软推出的移动端调试工具，类似 weinire 和 jsconsole 的合集：

  • 支持DOM查看

  • 打印调试信息

  • 修改样式规则

  • 使用 Modernizr 检测浏览器对 HTML5/CSS3 的支持

  • 浏览器信息

  • ...

TODO

1.8 Online

功能：查看网络信息

TODO

  • embed vorlon

  • support composer

  • clear 304 cache

  • support replay http

Clone this wiki locally