上一篇日志講了如何利用Firefox自帶的Web開發者工具分析網頁，知道了Firefox網絡分析器的強大，不過，自從我用了Chrome的開發者工具后，發現Firefox存在一些用戶體驗的問題，而Chrome在用戶體驗方面做得更為出色些。
如何使用Chrome開發者工具
跟Firefox一樣，Chrome的開發者工具也是自帶的，不需要安裝擴展插件程序。而調用也非常簡單，操作如下圖1所示（自定義及控制->工具->開發者工具）：
圖1:Chrome開發者工具
打開后界面顯示如下圖2：
圖2:Chrome開發者工具
Chrome開發者工具，界面是灰白背景，看起來很簡單不華麗，沒有Firefox的web開發者工具界面酷，這應該是繼承了Google一貫的低調風格吧。
不過，從統計的項目來看，這款工具包含的內容是非常豐富和專業的。而由于是英文界面，可能某些用戶不太習慣，不知有無漢化版的，我沒有查究過。
如何使用Chrome開發者工具分析網頁
首先打開該工具，把標簽切換到“Network”，如下圖3：
圖3:Chrome網絡分析器
然后打開網頁時，該分析器里就會自動顯示網頁各元素的請求情況，如下圖4所示：
圖4:Chrome網絡分析器
Chrome的網絡分析器直接在界面上顯示的項目比Firefox的Web開發者工具豐富得多，有Name（文件名）、Method（方法）、Status（狀態）、Type（文件類型）、Initiator（創始者）、Size（文件大?。ime（耗時）、Timeline（時間線）。
值得一提的是，這里比Firefox多了3個顯示項目，分別是Initiator（創始者）、Status（狀態）和Time（耗時），我覺得這幾個都很重要。尤其是Status（狀態）和Time（耗時），通過Status（狀態）可以立即看出網頁里哪些文件是什么樣的請求狀態，尤其是當我們要找出404狀態即不存在的文件也即是死鏈時，這個項目就非常有用，放在列表里，一目了然，而Firefox要點擊文件進去才可知道這個文件的訪問狀態，這明顯很費時間。而Time（耗時）這個參數也非常重要，對分析網頁非常有用處，通過它可以立即知道各文件的訪問時間是多少，所以這個項目放到列表里更好。所以我覺得Firefox在用戶體驗上沒有Chrome好。
