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