有一種八阿哥(bug)，叫「在我電腦上是好的呀」。
有一種解決方式，叫「你去好好排查一下你自己的**」。
有一種控訴，叫「這絕不是後端的問題」。
你能忍嗎？我不能忍，為這事，我可沒少跟同事撕逼，可是有什麼用嗎？ 最後我想，這事兒也許不怪別人，怪就怪我無法直接證明這些bug不是我的。今天我們就來說說有哪些難搞的線上問題，該如何去定位，並解決它。
但是，解決線上的問題，不是看你會什麼，而是看你有什麼？
【前端監控系統】
github位址；只需要簡單幾步，就可以搭建一套屬於自己的前端監控系統。
頁面白屏了，這對前端小夥伴來說，是最嚴重的bug了，因為業務因此癱瘓了，哪怕不是你的鍋，你也背定了。於是，你對著一張白屏，心急如焚，卻一臉懵逼，因為你什麼有用的資訊都沒有，解決起來真的無從著手。那麼導致白屏的原因有哪些呢？
很遺憾，確實是你的js報錯了，執行時丟擲異常，導致白屏。
靜態資源載入失敗，如：js、css檔案載入失敗，導致白屏。
以上兩點是導致前端白屏的主要原因，當然你說還有什麼機子相容性不好太卡，網路異常什麼的，那都小概率事件，屬於前端監控的另乙個維度，我們在這裡就不說了，以後說。
從上邊兩張圖可以看出，如果你知道了使用者在某個時間做了某個動作之後，發生了錯誤，解決起來，也就易如反掌了。
可能有人會認為介面的報錯應該由後台來關注，統計，並修復。 確實如此，而且後台服務有了很多成熟完善的統計工具，完全能夠應對大部分的異常情況， 那麼為什麼還需要前端來解決介面問題呢。原因很簡單，因為前端是bug的第一發現位置，他們肯定會先找到你，那麼在你幫後台背鍋之前怎麼快速優雅的"甩鍋"呢？
我們公司的後台可是有著完善的監控系統，他們都覺得自己的**和監控都做得非常完善，但是從我的監控結果來看，事實並非如此。當然，你也許會說這是開發和測試不專業，這麼明顯的問題都沒有發現，但是，我只能用一句話來解釋：人非聖賢。與其追究是誰的責任，不如想辦法解決問題。將線上的損失減少到最低。
同樣道理，如果你把下邊這張截圖發給你們的後台小夥伴，你還需要跟他們爭論是誰的鍋嗎？當然，如果是你自己的鍋，你還是趕緊偷偷修改掉吧，別跑去丟人了，哈哈。
網路是跟使用者體驗密切相關的因素，但卻是開發小夥伴無能為力的因素，因為這取決於使用者當時的網路環境是否良好。如果我們能夠判斷出使用者當時的網路情況，對我們排查問題也是很有幫助的。
首先，網路環境對頁面首次載入影響最明顯。 理論上講，我們是無法，或者說不方便把使用者當時的網路情況計算出來，但是我們可以側面評估出使用者當時的網路環境。雖然我們測不出來網速，但是我們可以計算出使用者首次載入頁面的時間，以此來評估使用者的網路環境。
如果，網路環境評估良好，而介面請求耗時又很長，這時候你就可以去找後端的小夥伴算賬了。
好吧，最憋屈的一種線上bug，就是替第三方公司背鍋啦。如果是第三方的東西出了問題，上頭永遠都只懷疑是你的**有bug，如果你沒有有力的證據，即使你已經排查過了，他們也只會說一句「你再去好好排查一下你自己的**」，這時候是不是有一鍵盤呼他臉上的衝動。
於是，我一怒之下，在監控系統裡加入了對靜態資源的監控功能。前不久，阿里部分區域的出現了5分鐘無法訪問的情況。我們線上群裡頓時就炸開了鍋，讓我趕緊排查問題。我開啟了錯誤監控，發現只有靜態資源報錯陡然飆公升。在群裡輕輕的說了一句，是cdn有問題，果然，不一會兒，cdn就發了公告了。我轉頭看向窗外，輕輕地吐了一口氣，天上的雲靜靜的飄著，此時此刻只有我自己知道，我再也不用替你背鍋了。
別人的鍋都甩給他們了，剩下咱來聊聊自己的鍋。正常情況下，線上前端**出現錯誤的可能行比較小，因為經過細心的測試，前端**錯誤是很容暴露出來的。另外，咱自己的鍋，咱自己清楚，加上我做了乙個非常細緻的錯誤分析，問題解決起來也是得心應手
總結：造成線上問題的因素有很多，**錯誤僅僅是其中乙個很小的因素。我們如何在這眾多繁雜的因素之中找到真正原因，就需要有意見趁手的工具。我開發使用前端監控系統到現在，最深的感觸是：「這個監控系統並不是幫我解決了很多問題，而是能夠告訴我那些問題我不能解決」，這就足以讓我從現實的困境中解脫出來。所謂，工欲善其事必先利其器，說得可能就是這個意思吧。
線上出現bug
測試申請使用者交付押金 開啟支付頁面 使用者登出或清除cookies 支付成功後，支付狀態未改變的問題 1.發出支付申請後，使用者退出登入然後成功支付，支付狀態是否顯示成功 2.發出支付申請後，使用者清除cookie後成功支付，支付狀態是否顯示成功 正常case 1.發出支付申請後，使用者成功支付，...
前端頁面小bug解決
問題一 easyui使用iframe載入頁面出現非 div資訊先載入顯示情況 解決方式 在彈窗div上設定dispaly none.非彈窗div讓他延時載入 延時載入搜尋框 window.setinterval showmsg,100 function showmsg 問題二 a標籤外巢狀多層標籤，...
線上測試bug工具
根據每個公司性質的不同，規模的不同，所用到的bug管理工具也可能不同。你們用的bug管理工具是什麼呢？ira的生產者把jira定義為professional issue tracker，即它是乙個專業的問題跟蹤管理的軟體。這裡的 問題 對應的英文單詞是issue，所以含義比較廣，包括bug,task...