本文以檢查XSwitch網頁故障為例，其實對其他網絡問題也通用。
假設你登入以下網址時遇到故障無法登入：
https://demo.xswitch.cn/admin.html
用Chrome浏覽器（微軟Edge浏覽器也類似）打開上述網址，按F12鍵，或右鍵點選網頁，然後選擇【審查元素】菜單，将會出現類似下面的圖，下面就是Chrome開發者工具區域。我的界面是英文的，是以我嘗試中英文都進行說明。
切換到【網絡】（Network）頁籤，如果能看到很多網址，則最好點一下左起第二個圖示（箭頭指向的）清除一下，這樣看着比較清爽。
點選登入，會看到一個
sessions
請求，如果登入不成功，則會以紅色的顯示。點選它可以看到詳細情況，如下圖。
圖中，headers為HTTP請求的頭域，Request表示請求，可以看到請求的完整網址。Response為響應，其中，Content-Length、Content-Type等一般比較重要。Status Code為狀态碼，一般有以下取值：
- 200：請求成功
- 403：登入失敗，可能是密碼不對
- 502：無法通路背景服務，出現在Nginx伺服器無法通路上遊（
upstream
上圖中的403就是密碼不對。點選其它頁籤：
Payload：請求内容
{username: "admin", password: "1234"} 複制
Preview：預覽，服務端傳回的資料
{username: "admin", password: "1234"} 複制
Response：響應，服務端傳回的資料
{ "code": 403, "text": "Wrong username or password"} 複制
從上面的資料可以看出，大機率是密碼不對。
XSwitch典型的部署架構如下圖。如果Nginx到XSwitch的連接配接中斷，則會傳回502。
浏覽器Nginx請求響應XSwitch請求響應
如果你遇到其它故障也可以按此步驟排查。如果你看不懂傳回的結果，可以複制結果内容或截圖發給XSwitch技術支援工程師排查。
如果你熟悉cURL，你會看到上述的步驟其實類似：
curl -d '{username: "admin", password: "1234"}' -H "application/json" https://demo.xswitch.cn/api/sessions 複制
傳回：
{ "text": "Wrong username or password", "code": 403} 複制
在
curl
指令後加上
-vvv
參數，可能看到更詳細的請求和響應頭域。
本文主要是以排查XSwitch登入問題為例講解Chrome Devtools的使用方法，步驟和思路适用于任何跟浏覽器相關的問題。如果你确實遇到了XSwitch相關的問題，可以繼續參考在安裝或使用XSwitch時遇到問題我該怎麼辦：https://xswitch.cn/pages/howto/trouble-shoot/ 。