原文：https://www.jianshu.com/p/696474d96bde

在web測試過程中，經常會遇到頁面中內容或資料顯示錯誤，甚至不顯示，第一反應就是BUG，進一步瞭解這個BUG的問題出在那裡，是測試人員需要掌握的，可以簡單的使用瀏覽器自帶開發者工具、資料庫工具配合去排查。

bug定位常用工具

Firefox——firebug、web developer、live http headers、http fox

IE外掛——httpwatch

第三方工具——fiddler

慢速網模擬工具——firefox throttle

前臺錯誤

前臺的bug通常是功能、介面和相容性等有關，涉及到jstl，jsp，js，css，html方面比較多。bug主要有兩塊，第一就是JS寫的有問題，這個你可以按F12 開啟控制檯，在console中檢視報錯資訊，一般瀏覽器都會顯示報錯的jS ，對於出錯的js可以在Sources下檢視對應報錯的資原始檔，基本上都會找到錯誤原因的變數未定義，引數未定義等，JS錯誤都很好解決的。這裡向大家推薦一個測試交流圈q裙：1007119548。

第二個就是頁面中的bug了，現在做web專案基本上沒有做靜態頁面的都是動態了，所以你頁面中要麼使用了小指令碼要麼使用了EL表示式來存值。頁面報錯的話 在控制檯是可以看到你錯誤行號和附近程式碼的，你自己去找就行了。

圖片不顯示，谷歌瀏覽器右鍵點選圖片，點選【檢查】，（火狐瀏覽器右鍵點選【使用firebug檢視元素】）在開啟的控制檯上找出圖片的屬性，輸入到瀏覽器的地址內，如果能開啟圖片，那麼不顯示圖片的問題就是後臺的問題；如果瀏覽器內不能開啟圖片，那麼就是前端的問題。

開發者工具的使用（chrom瀏覽器）

（1）開啟開發者工具，在瀏覽器選單欄選擇工具-開發者工具，快捷鍵是F12

（2）開啟之後切換到Network頁籤，操作就可以看到請求響應

（3）再選擇響應的連結，切換到Preview頁籤，可以看到響應的結果資料；切換到Headers頁籤可以看到請求的地址，請求的方式，結果等資訊

（4）Response結果中可以看到返回的資料欄位、值

 

 

 

 

 

可以根據響應的值判斷一些bug所在

（1）響應中沒有資料，則是後端資料沒有返回，前端展示為空，則為後端問題。例如：列表中新增一個資料，沒有顯示，通過請求中可以看到資料total為0，則是後端資料沒有返回。

（2）響應中有資料，但是前端顯示錯誤了，可以根據欄位值判斷是否前端顯示中取錯了欄位顯示，可以判斷是前端問題。例如：B端顯示內容錯誤了，把登入使用者名稱顯示了登入帳號，則可以在響應中看資料是否返回正確，返回正確而顯示錯誤，則有可能是前端繫結欄位錯誤。

（3）響應中有資料，但是跟自己操作的結果不一致，可以根據資料庫查詢，如果資料庫中也沒有記錄，可能是程式碼有問題，沒有記錄你的操作。例如：註冊了一個帳號，但是登入時提示帳號或密碼錯誤，這就可以在資料庫表中檢視是否有註冊的資料。

後臺錯誤

根據後臺日誌檔案查詢錯誤 後臺涉及到servlet，jms，ejb，還有很多框架，struts，hibernate，spring，ibatis等。bug 比較難改，但是好找。主要就是看控制檯報錯，然後定位錯誤行號。如果配置檔案沒有問題，那麼一般的報錯就是空指標，或者是陣列下標越界。看附近變數，看方法的引數基本上都可以定位錯誤了

重啟的一般情況：
（1）熱部署 （新增部分功能，或者修改部分bug) （2）釋出新版本 （整個系統）（3）記憶體溢位，此時重啟伺服器即可

由於專案中有執行緒程式，./shutdown指令碼關閉tomcat程式，不能把啟動的執行緒全部關閉，造成伺服器啟動執行緒未關閉的錯誤,所以
Linux系統中重啟Tomcat的一般步驟：（一般是先關閉程式，然後進行重啟 ，如果 /要刪除某個檔案：rm 檔名，或者不為空的資料夾：rm -rf 資料夾名）
cd usr/local/ //測試伺服器名稱/bin
ps -exf //看測試伺服器下執行的專案的主程式（最前面的數字為PID程式號）
kill -9 PID //強制關閉某一專案的主程式
./startup.sh // ./.sh即執行重啟shell指令碼檔案 ，此時在測試伺服器的bin下面，直接執行即可，其餘的加上 chmod a+x shell指令碼檔案，也可用./執行
（小知識：
ps aux和ps -ef命令區別
ps aux 是用BSD的格式來顯示 java這個程式
顯示的專案有：USER,PID,%CPU,%MEM,VSZ,RSS,TTY,STAT,START,TIME,COMMAND
ps -ef 是用標準的格式顯示java這個程式
顯示的專案有：UID,PID,PPID,C,STIME,TTY,TIME,CMD）

如何檢視日誌 一臺伺服器可以部署多個應用
cd usr/local/****測試伺服器名稱/logs //檢視先進入到伺服器的logs目錄下
tail -f catalina.out //****監視catalina.out 檔案的尾部內容（預設10行）
日誌中常見的問題
獲取日誌檔案中常遇到的問題：
(1）編碼問題：tomcat是新的，需要改編碼修改tomcat的server.xml檔案<Connector port="8080"URIEncoding="UTF-8"/>
特別是windows下的專案重新部署到linux系統下，
(2)空指標：程式問題，一般沒有考慮到為空情況，或者主外來鍵約束的資料為空，或者刪除關聯資料，導致為空
(3長度過長，超過最大長度，測試環境修改資料庫欄位長度後生產環境未修改，導致報錯！！
(4)非法資料
(5)記憶體溢位：重啟

一般的問題原因總結 程式：為空判斷，增刪改查,不同公眾號呼叫的介面也不一樣
資料初始化：資料庫表結構和資料初始化，許可權配置，

故障無法重現時：
（1）看日誌，根據日誌定位原因，則在測試環境中按照日誌提示構造條件相同的測試案例測試，嘗試在測試環境中將問題重現。問開發
（2）測試環境和配置與實際的工程環境和配置有哪些差異等等。同時主動與開發負責人、工程實施人員以及有經驗的專案經理討論，分析可能導致的原因。這裡向大家推薦一個測試交流圈q裙：1007119548。

配置環境不一致導致
測試環境ok，生產環境新增時儲存失敗，檢視後臺日誌報長度溢位，資料庫內容欄位要求和生產環境不一致

輔助工具：linux和SQL linux檢視日誌
SQL用來篩選資料或直接進行資料修改狀態，多用於整合測試過程中前後流程相連線

jsp分不清前後臺的，因為這裡涉及到一個執行時刻的問題，它們的執行時刻是不同。使用者發出請求後，伺服器解析使用者請求，轉至對應的jsp，這個時候可以說是整個jsp都是後臺程式。而Jsp做出響應後，把響應的內容返回給瀏覽器，這個時候瀏覽器就只看見html,css,javascript，這個時候所有的程式又都是前臺程式。

火狐瀏覽器的web控制檯

開啟方式如下：選單上點選【工具】

 

 

Web控制檯頁面顯示

 

 

谷歌瀏覽器開發者工具

按F12開啟，頁面顯示如下：

 

 

Element標籤：該標籤使用來檢視頁面的HTML標籤元素的，能夠也就是檢視原始碼，我們可以看到佈局，可以看到用到的樣式，還有用到的連結等等。

console標籤：這個就是一個web控制檯，可以檢視網頁執行後提示的訊息，錯誤或者警告以及輸出內容等

sources標籤：這個是顯示資原始檔的，可以檢視執行的指令碼，除錯一般都是在Sources除錯的

 

 

1.該選擇框使用來選擇資源的，當網頁被載入的時候向伺服器端請求出來的檔案包括.html .ccs .js這樣的檔案。
2.這個地方使用來除錯js程式碼的地方，這個非常重要，看到行號上面有藍色的標籤，這個標籤就是斷電，當我們需要除錯程式的時候打一個斷電，然後通過3這個工具欄進行除錯，那麼除錯過程就不詳細解釋，也就是打一個斷電然後重新整理頁面程式會調到你打斷點的地方，然後通過4來檢視程式中變數的值什麼的。
3.中的標籤，第一個是停止狀態的按鈕就是表示程式是否停止（在debug時），後面的是程式繼續跳過方法，跳過下一個語句，調到上一個語句。

Network標籤：這個就是抓包常用的工具，可以看到網頁載入的指令碼和資源的時間，還可以看到某些不能載入成功的資源

 

 

那麼這個頁面就是用於抓包的頁面，我們需要分析頁面的請求，比如模擬登陸什麼的都需要去分析程式是怎麼在後臺執行的，接下來就，我們可以看到Headers（請求訊息頭） Preview（預覽） Response（響應） Timing（請求時間）Cookie這些東西

最上面還有一個工具欄，有一個紅色的圓點和靜止符號的按鈕，那麼這兩個按鈕，當為紅色按鈕的時候表示當前的請求不被清空（但是這裡的請求是不跳轉頁面的請求，當跳轉到新的頁面，那麼也會請求也會被清空），後面這個按鈕就是清空請求的。

下面還有一行工具欄，這個工具欄主要是用來選擇和過濾請求訊息的。

再下面可以看到時間線，這個就是記錄一個請求開始到結束的時間。

注意：當你需要請求到另一個頁面的時候都不清空你的請求的時候需要勾選上Preserve log，同時讓紅色按鈕顯示紅色

TimeLiness標籤：這個就是請求時間

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

獲取資料

本次給大家推薦一個免費的學習群，裡面概括Python/效能/介面/安全/自動化軟體測試以及面試資源等。
對測試感興趣的同學，歡迎加入Q群：1007119548，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成。