你也會的 Web HTTP 封包除錯技巧(Client 篇)


前言

以往的 Web Design 可能只是編寫靜態 HTML 檔案,除錯時大概透過檢視原始碼就可以完成。但現在的 Web 技術越來越強大,使用 AJAX 等等技術實作功能已經是家常便飯。除此之外,瀏覽器中類繁多,對於 HTTP 的實作都不盡相同,又有快取機制的干擾。再者網路環境複雜,常常 HTTP 封包在經過防火牆、負載平衡器 (Load Balance) 或代理伺服器 (Proxy) 等等設備之後就變了樣,這些原因與環境都讓我們在 Wed 開發除錯上,增加了不少難度。

典型 Web 環境架構介紹

我們先回到 HTTP 1.1 最基礎的 REST 設計架構,參考文章「Architectural Styles and the Design of Network-based Software Architectures」中的 5.3 章節「REST Architectural Views」如下圖:

Figure2

上圖已經明確表示我們目前的網路架構,通常除錯工作進行時我們僅能夠在「可以操作的角色」上進行除錯,「可以操作的角色」指的是我們有權限使用的工具或機器,因為我們總不可能隨意進出路由器機房等等「機房重地」。這樣看來,大部分的情況下我們只能從 Client 與 Origin Server 這兩個角色下手了。我們今天先介紹幾種在 Client 觀看 HTTP 封包的方法,Server 與其他階層的除錯方式就下次再介紹囉。

Browser Client 開發者工具除錯

Client 對 Web 架構來說,最常見的就是瀏覽器 (Browser),原始的作法都是透過 Network Sniffer 軟體來進行,像是 WireShark 等等封包監聽應用程式。但現在的瀏覽器大多數內建了「開發者工具」,可以讓我們直接監看瀏覽器送出的 HTTP 封包。以 Google Chrome 為例子,只要按下 F12 就會出現「開發者工具」,點選「Network」重新整理就可以看到封包記錄了,畫面如下:

web_debug_1

透過這樣的工具我們可以看到 HTTP Request 與 Response 封包,最常使用的就是查看 Headers 裡面的內容,也可以用來觀察瀏覽器對於 HTTP 的實作細節。此外,像是 IE, Firefox, Safari 都同樣擁有差不多的開發者工具,使用介面也都大同小異,這也是最基本的瀏覽器開發除錯工具。

透過 Proxy 對行動裝置 Browser 與 Web App 進行除錯 (Fiddler)

電腦有瀏覽器,行動裝置當然也有,但是行動裝置上的瀏覽器可不像桌機那麼方便。瀏覽器在行動版大多數不提供「開發者工具」,要在行動裝置上監聽 HTTP 封包,最簡單的方式就是透過 Proxy 來處理。這裡我們介紹 Fiddler 這一套免費軟體,安裝完後開啟 Fiddler 就可以自動監聽這台電腦的 HTTP 封包,在來我們要開啟 Proxy 功能,從工具列「Tools」選擇「Fiddler Options...」如下圖:

web_debug_2

進入後選擇「Connections」頁籤,並勾選「Allow remote computers to connect」這個設定,如下圖:

web_debug_3

我們以 iOS 為例,接著在 WIFI 設定中輸入安裝 Fiddler 的桌機 IP 與 Port,這樣所有透過手機的 HTTP 封包就會在 Fiddler 可以看到囉。如下圖:

web_debug_4

Fiddler 還有很多好用的功能,剩下就請自己去發掘囉。Server 的封包擷取方式下次再介紹,敬請期待囉。

參考資料

Facebook 留言

廣告

樂樂童鞋