一個成熟的業務，必定會有各種埋點來支撐業務數據上報，在日常開發工作中埋點需求跟業務需求一樣重要，所以埋點發送的正確與否關係到某個業務功能的驗證，甚至可以影響到整個公司的戰略決策。
日常工作中，一般是由測試人員來驗證埋點是否發送正確，但是有很多責任心很強的產品可能不太相信開發和測試同學，他們希望自己來驗證這個埋點是否發送正確，這時候就需要使用到抓包工具，比如Fiddler， Charles等。但是在使用這些工具前還需要做一些列的設置才能抓包成功，產品覺得這個配置太繁瑣，以下是總結的一些問題：
1、手機、電腦上需要安裝證書。
2、手機需要設置代理，連上電腦。
3、安卓抓包需要debug版本
4、Fiddler和Charles是抓到手機上所有的請求，他們只想看埋點。
爲了幫助產品有個好的埋點驗收體驗，我們特意設計了這套天眼抓包系統，產品只需要在彩蛋頁面中開啓天眼功能，然後打開瀏覽器輸入網址按下回車，就可以馬上進行驗收了。不需要安裝證書，不需要設置代理，無論debug包還是release包都沒問題。下面看看效果：
思路
爲了讓產品有更好埋點校對的體驗，我們首選是讓產品可以在電腦瀏覽器中進行操作，所以如何讓APP中發出的埋點實時的展示到瀏覽器中是關鍵，這裏我們使用了websocket來實現，思路是，APP中產生的埋點通過http post調用上報到web server，然後web server再把日誌通過websocket推送到用戶的瀏覽器上，整個過程幾乎可以做到實時。如下圖：
這裏因爲本人對js不是很熟悉，所以這裏使用flutter來實現，使用flutter來實現目前可以支持web，android，ios。產品也可以用手機或者平板native app來查看埋點。（*注 目前flutter的SelectableText widget在web端的實現有問題，不能拷貝文字）
接口設計
1、手機通過http post請求發送log到server端
url：${host}/logcat/postlog
http method: post
params:
| 參數名 | 類型 | 示例 | 示例 |
|---|---|---|---|
| log | String | {"url":"xxx", "userid":"xxx"} | 產品關心的埋點數據，json 表達式 |
2、服務端實現
服務端這邊不做任何的內容解析，把拿到的log值原封不動的push到瀏覽器端，瀏覽器端拿到log的值進行解析展示。
2.1 post接口
2.2 websocket接口
3、Flutter端實現
這塊使用 web_socket_channel 組件來實現鏈接websocket，這個組件即支持Web端，也支持app端。如果你需要打包web端的應用你需要使用HtmlWebSocketChannel，打APP端的應用你需要使用IOWebSocketChannel。
代碼
現在服務端和Flutter端的代碼已經放到github上，有興趣的同學可以拉下來看看：https://github.com/dengyin2000/logcat
Flutter端代碼由於時間關係，爲了儘快實現功能，代碼設計架構上沒有做很好的設計。