背景
-
一個項目從開發到上線，必將測試過程。在中小型公司中，程序的測試改bug過程幾乎由全手工完成。一般需要經過這幾個階段：
- 測試發現Bug，並向開發反饋
- 開發與測試溝通，重複多次瞭解相關情況（如所在頁面，賬號密碼，所做的操作，重現步驟，瀏覽器信息等）* N
- 開發發現問題，修改代碼，完成bug修復
- 一般而言，在改bug過程耗時最多的，是開發向測試瞭解情況的這個步驟，這是一個反覆溝通的過程，需要極大的溝通成本，而且還可能發生信息溝通遺漏的情況。
- 如果是移動端的項目，改bug的耗時更甚。爲了解與後端交互的數據情況，還得抓包（裝證書，設置代理，輸入地址等）
- 爲了解程序的運行情況而做的操作是重複，繁瑣，無意義。
- 本項目意在用程序代替我們完成步驟二的工作，減少測試和前端的溝通成本，減少bug重現的耗時，提高工作效率。
項目使用介紹
本項主要用於記錄出現bug時程序的運行信息，如ajax請求，自定義收集的參數（如用戶賬號密碼），頁面路徑，瀏覽器信息等，給開發改bug提供參考數據，定位問題。工具的方式也很簡單，分爲如下四個步驟：
- 當測試發現bug時，點擊按鈕上報數據
- 打開列表，找到剛剛上報數據的對應詳情鏈接
- 測試向開發反饋bug並附上Bug信息對應鏈接
- 開發通過bug信息瞭解程序當時運行信息，快速重現或定位問題，修復bug
項目特點
前端可獨立完成系統部署。
- 可能很多小夥伴看到數據存儲和頁面存放，會煩惱，這些後端東西我不懂啊，也不想麻煩後端人員啊。
- 不用怕，本項目不需要後端編程。數據存儲和頁面存放我們都通過第三方服務（LeanCloud和github，都是免費的，後續會講到）來完成，前端可完全獨立搭建。而且過程很簡單。
- 整個配置過程半個小時足矣，且不存在坑。
功能簡潔
- 一共就5個函數，一看就會用。
源碼簡單
- 源碼沒有加密
- 除了數據存儲（LeanCloud），不依賴任何第三方插件
- 源碼簡單，可針對自己的項目進行定製化改造或擴展
配備源碼介紹文檔
- 有興趣瞭解背後技術原理的同學可以點擊這裏，查看源碼說明文檔
LeanCloud配置說明
在系統使用前，我們需要先開通LeanCloud，準備一個數據存儲空間
LeanCloud簡介
- LeanCloud就是BaaS服務商的一種，可提供數據存儲服務。前端可以通過JS代碼簡單地操作存儲在服務器中的數據。避免了後端知識門檻，避免後端開發的工作。
- 國內較爲流行的BaaS服務商有LeanCloud，Bmob，uncode等
註冊及基本使用
-
註冊方法很簡單，通過github和QQ都綁定註冊，不需要認證備案等繁瑣過程，註冊即可用。
- 註冊完成後，點擊控制檯。
- 點擊創建應用，這裏我們選擇「開發版」即可，開發版是免費的，每日可請求數30,000 次，對於一般的項目測試而言足夠了。
- 點擊應用，進入詳情。注意：由於系統要對新建的項目進行一系列初始化工作，例如創建數據表格等。需要等待3分鐘後再進行後續操作。
- 點擊設置-》應用key，記錄「App ID」和「App Key」。後續使用LeanCloud功能時需要用到
- 點擊創建class，類名設置爲bug，默認權限需要勾選爲「無限制」，否則部分功能將被限制。（如果擔心數據安全性，可以點擊這裏查看優化方案，在此我們先實現主體功能）
- 點擊新創建的class，右側顯示的，就是該類保存的數據表。
- 到此爲止，已完成了LeanCloud的配置工作，不需要像數據庫那樣，定義表，定義每列屬性等操作，系統後自行處理。
VUE組件使用說明
設置好LeanCloud，我們就可以使用信息收集的組件了
組件的載入
- 按常規載入方式即可，點擊這裏，獲取源碼
- 將代碼文件夾放入項目中，例如這裏放在components文件夾中
- 在全部VUE中載入組件，如layout組件中
- 引用
import FrontTool from '@/components/front-tool/front-tool' - 註冊
components: {FrontTool}, - 使用
<front-tool/>
API介紹
- 【this.$addCustomData(Object)】 添加自定義數據，即在數據收集時，上報特定的自定義數據，通過key-value方式保存。
- 【this.$clearCustomData()】 清除自定義數據，該方法將在路由變化時自動被調用，即自定義數據僅在當前路由有效，路由跳轉後將自動清空。
- 【this.$addGlobalData(Object)】添加全局自定義數據，在整個程序中有效，每次上報數據都將攜帶該信息，可用於保存用戶賬號密碼等全局信息，以便改bug時重新登錄該賬號，重現問題
- 【this.$clearGlobalData()】清除全局自定義數據。
- 以上函數均自動註冊到VUE全局函數中，在VUE文件中直接通過
this.調用即可 - 以上函數在生成環境中將會自動失效，不用擔心報錯，無需特別註釋相關代碼。
修改配置文件
- 修改LeanCloud的配置信息，打開front-tool.VUE，找到AV.init， 填入前面記錄的 LeanCloud 的「App ID」和「App Key」。
-
修改對應各個環境的域名前綴。若全部都不命中，則自動設置爲local本地環境。
let envObj = { dev: '-d.tanzhouedu.com', // 開發環境域名前綴 test: '-t.tanzhouedu.com', // 測試環境域名前綴 pre: '-p.tanzhouedu.com', // 預發佈環境域名前綴 prod: '.tanzhouedu.com', // 正式環境域名前綴 }
運行項目
- 原頁面左下角將出現前端工具按鈕
- 點擊彈出菜單 -> 點擊上報數據。
- 重新打開LeanCloud，打開bug類。在右側，我們可以看到剛剛上傳的數據。
到此，數據上報的部分也已完成，最後剩下的是數據查看部分的配置過程。
bug管理系統配置說明
- 這部分就更簡單了，先點擊這裏，獲取相關代碼。
- av.js是leadCloud插件，VUE.js就是VUE庫，bug-list.html是數據列表頁面，bug-detail.html是詳情頁面。
- 修改bug-list.html及bug-detail.html頁面中的LeanCloud配置，同樣找到AV.init，填入「App ID」和「App Key」。
- 將這四個文件放進靜態服務器，直接訪問bug-list對應鏈接。即可看到上報的數據列表，點擊詳情可查看某條數據的詳情信息
- 到此，數據查看部分也配置，整個系統也部署完成啦，很簡單吧。
github 網站配置
有些同學可能沒有自己的靜態服務器，沒關係，那我們用github也可以做靜態服務器
- 我們先創建一個新項目，項目名不重要。
- 點擊setting，找到GitHub Pages欄（ctrl+f搜索GitHub Pages可快速定位），設置爲master分支。
- 回到項目，我們會發現倉庫多了個_config.ym文件，這個就是使用github做靜態服務器的配置文件。
- 接下來是常規的操作，克隆，推送，將前面下載的4個文件推到github上。
- 重新打開GitHub Pages欄，打開給出的路徑，這個路徑訪問的就是我們github的倉庫，我們在路徑上加上
/bug-list.html，即可訪問數據列表頁面。 - Github配置也很方便，就是訪問速度有點慢，不定期可能被牆，有時間的同學建議買個雲服務器，按流量計費很便宜，每天一毛幾毛錢就行。有困難的話，在留言區留言，筆者有空可以寫篇文章介紹。
待優化
系統部署完了，已經可以應付一般的項目需求。但本系統還有可進一步優化的地方
- 數據安全問題，因爲LeanCloud的配置信息是明文寫在代碼中的。而前端代碼又是很容易被破解，那有什麼辦法可以保證數據的安全性的呢？
- 這個系統不僅可以在測試環境用，在生成環境也可以發揮它的作用的，例如我們可以監聽後端返回的接口情況，當返回異常狀態碼時，主動上報數據。以便定位生成環境上的問題。
- 除了接口情況，我們還可以收集VUE的報錯信息，存儲到自定義數據中，收集生產環境的報錯信息。
- 非VUE版本。目前該系統數據收集部分僅做了VUE版本的，後續將開發純js版本的，讓我們在開發非VUE項目時也能使用。
- 前三個問題的解決方案，請關注後續文章，點擊這裏查看
