第2章{ 2-13 使用抓包工具线上调试 }

使用抓包工具线上调试

在线上调试过程中，通常我们需要用到抓包代理工具，比如Fiddler、Charles、LivePool，将线上的assets资源代理成本地工程源码资源。

这里以 Charles 为例，说明如何代理kissy的模块文件。

访问 http://demo.apebook.org/bee-demo/demo/online_index.html，现在我们想要将其代理到本地工程的 src 目录下的文件，该如何处理呢？

先代理 http://g.alicdn.com/kissy/k/1.4.8/??seed-min.js,import-style-min.js 到 http://g.alicdn.com/kissy/k/1.4.8/??seed.js,import-style.js ，开启kissy的调试模式。

使用 Charles 的远程代理功能：





刷新页面，就会加载 非 -min.js 的源码文件。

运行 gulp 命令，开启本地服务，http://localhost:5555：

PS：需要先安装gulp依赖，请先运行 npm install。

本地服务的目的是，给src下地cmd模块文件，增加上 kissy.add() 包裹，方便代理到源码调试。





选择 build 目录（我们代理的是整个目录，这样不需要一个个文件代理影响效率），右键点击出现菜单，选择“Map Remote”：





配置类似如下：





我们修改本地的src/index.js，加了个alert('test')调试信息，重新刷新demo页面试试，弹出了一个对话框：