第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頁面試試，彈出了一個對話框：