Chrome開發者工具之測試應用

1、Chrome開發者工具簡介

瀏覽器的開發者工具(DevTools)能夠幫助開發人員對網頁進行佈局，好比HTML+CSS，幫助前端工程師更好的調試腳本（JavaScript、jQuery）之類的，還可使用工具查看網頁加載過程，獲取網頁請求（抓包）等。對於測試工做者來講，主要用於獲取網頁請求（抓包），還能夠輔助UI自動化測試中的元素定位等，其它應用正在挖掘中。

1.一、開發者工具(DevTools)調用

瀏覽器的開發者工具備不少種，其中Chrome開發者工具功能較齊全一點，下面的介紹都是基於谷歌開發者工具(ChromeDevTools)展開。該工具的調用方式根據具體的系統和應用來：

• Windows用戶在谷歌瀏覽器中調用工具只須要打開頁面後按F12便可，也能夠在網頁右鍵選擇「檢查」調用。
• Mac用戶可使用option+command+I組合鍵，也能夠在谷歌瀏覽器中右上角選擇更多->更多工具->開發者工具
• 有些PC桌面應用內嵌了Chrome DevTools工具的，能夠在桌面應用的H5頁面直接右鍵喚出。注意：只能在H5頁面中使用。

##使用注意：

1. 瀏覽器中每打開一個新頁面時，須要從新調用開發者工具；
2. 桌面應用中每打開一個新的H5頁面以前，須要關閉上一個頁面的工具，而後在新的頁面從新調用開發者工具；

2、Chrome DevTools詳細介紹

1.一、模塊介紹

谷歌開發者工具(Chrome DevTools)中功能模塊有不少，經常使用的主要有元素（ELements）、控制檯（Console）、源代碼（Sources），網絡（Network）這四個。其餘的模塊對於測試的輔助做用相對較小。

各模塊功能的介紹以下：

• 元素（ELements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。測試工做者能夠在這個模塊查看各元素，驗證定位元素的惟一性等；
• 控制檯（Console）：這個模塊能夠查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本之外，還能夠看成Javascript API查看用；
• 源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼等。該模塊的斷點調試功能，測試時用到的比例較高；
• 網絡（Network）：網絡頁面主要用於查看http請求等與網絡鏈接相關的信息。測試過程當中重點使用的模塊；
• Performance（性能面板）：使用時間軸面板，能夠經過記錄和查看網站生命週期內發生的各類事件來提升頁面運行時的性能
• Memory（內存面板）：分析web應用或者頁面的執行時間以及內存使用狀況
• Application（應用面板）：記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等
• Security（安全面板）：使用安全面板調試混合內容問題，證書問題等等
• Audits（審覈面板）：對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的CSS文件等
• 資源（resources）：能夠清理緩存。瀏覽器的resources在移到了Application中；

2.一、元素(Elements)詳解

Elements模塊展現的就是頁面的各個組成，主要內容有HTML+CSS+JavaScript，能夠對元素進行查看、修改、刪除等操做。

2.1.一、元素編輯

經過(Chrome DevTools)中的箭頭，能夠查看頁面具體某個圖片，輸入框等的元素。首先點擊箭頭，而後在頁面點擊想要查看的元素。

以百度的輸入框爲例：

雙擊元素的某個屬性，能夠選中複製該屬性。

選中某個元素後右鍵彈出的選擇框中，能夠進行刪除、複製、修改元素等。還能夠複製Xpath絕對路徑。

2.1.二、輔助元素定位

Web自動化測試時，有時須要使用Xpath路徑表達式或者CSS選擇器來定位元素，在定位以前須要驗證該路徑的惟一性，此時能夠在Elements模塊裏使用快捷鍵「Ctrl+F」，出現的輸入框中驗證該路徑。

以Xpath爲例，現有如下元素：

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

Xpath定位表達式：//input[@class='s_ipt']

2.1.三、ChroPath插件

UI自動化測試在定位元素這一環節須要花費大量的時間，容易出錯，且還須要熟悉定位元素的原理。谷歌瀏覽器的ChroPath插件能夠自動生成定位表達式，只需單擊一下便可生成惟一的相對xpath路徑，絕對xpath路徑，cssSelectors，linkText和partialLinkText。ChroPath還支持iframe，多重選擇器生成，具備自定義屬性的相對xpath生成，自動化腳本步驟生成等等。

使用方法：

1. 安裝插件，與谷歌其餘插件安裝方式同樣；
2. Elements模塊右側，單擊「 ChroPath」選項卡；
3. 選擇要定位的元素後，便可自動顯示定位表達式；
4. 要評估XPath / CSS，請輸入XPath / CSS查詢，而後按Enter鍵。
5. 若是將鼠標懸停在ChroPath選項卡中的任何匹配節點上，則綠色/藍色虛線輪廓將轉換爲點綴的橘紅色，以突出顯示網頁中的相應元素。

該插件的其它使用功能和下載地址，可訪問地址：https://173app.com/apps/ljngjbnaijcbncmcnjfhigebomdlkcjo
下圖中示例使用方法(以百度輸入框爲例)：

 

 

 

 

3.一、控制檯（Console）詳解

在Console中能夠查看JavaScript的對象及屬性，也能夠直接寫JavaScript運行。在測試工做中應用主要有以下幾個場景：
一、有些APP、桌面應用內嵌了H5頁面的，有時遇到Bug了可使用JavaScript的Location 對象取出當前H5頁面的完整URL，而後丟給開發。在工具中輸入location.href,彈出的URL中右鍵選擇「Copy link address」便可完成複製。

4.一、源代碼(Sources)詳解

源代碼(Sources)模塊主要是查看頁面HTML、JavaScript等源碼，對於測試來講該模塊的斷點調試功能會用到。測試過程當中頁面有些提示、動畫效果等只展現幾秒時，能夠經過打斷點暫停效果顯示。

以toast提示爲例，toast提示的展現效果只有幾秒鐘，有時錯誤的toast內容很長，能夠將效果暫停後再仔細查看提示內容。效果以下圖：

在UI自動化測試時，須要對toast提示定位時，也能夠暫停後在Elements模塊中定位元素。

5.一、網絡（Network）重點詳解

Network 面板記錄頁面上每一個網絡操做的相關信息，從發起網頁請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態，資源信息，大小，所用時間，Request和Response等）。瀏覽器頁面、嵌入了H5頁面的程序測試過程當中，常常經過這個模塊查看接口請求、抓包、響應時間等，是頻繁使用的模塊。

注意：每一個頁面查看網絡請求數據時，都須要從新調用Chrome DevTools，而後刷新頁面才能獲取頁面數據。
Network主要包括5大塊窗格：

1. Controls：控制Network的外觀和功能。
2. Filters： 控制Requests Table具體顯示哪些內容。
3. Overview： 顯示獲取到資源的時間軸信息。
4. Requests Table： 按資源獲取的先後順序顯示全部獲取到的資源信息，點擊資源名能夠查看該資源的詳細信息。
5. Summary： 顯示總的請求數、數據傳輸量、加載時間信息。

Network 面板按鈕介紹以下圖：

5.1.一、Requests Table(請求列表)

此列表列出了檢索的每一個資源。默認狀況下，此表按時間順序排序，也就是最先的資源在頂部。單擊資源名稱能夠得到更多信息。提示：右鍵單擊列表的任何標題欄能夠以添加或刪除信息列。

Requests Table列表中，每一列的含義：

• Name：資源名
• Status：響應狀態
• Type：響應數據類型
• Size:響應數據大小
• Time：響應時間

5.1.二、資源詳細信息

點擊某個資源的Name能夠查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太同樣，可能包括以下Tab信息：

• Headers：面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等。
• Preview：根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
• Response：顯示HTTP的Response信息(未進行格式化)。
• Cookies：顯示資源HTTP的Request和Response過程當中的Cookies信息。
• Timing：顯示資源在整個請求生命週期過程當中各部分花費的時間。

一、 Headers頁面中包含的http請求以及響應信息等，能夠查看該資源、接口的情況，具體的數據含義以下：

 

 

Status Code:響應狀態碼可以直觀的瞭解接口的狀況，200-可以正常訪問資源，404-請求的資源（網頁等）不存在，500-內部服務器錯誤等。

請求頭中的content-type、查詢字符串格式的參數、Request Payload等都是接口自動化時須要的參數。

二、Preview頁面能夠查看服務端返回的json數據，而且按照JavaScript的對象格式展現預覽。層層展開後能夠看到具體的數據，有時定位先後端bug時能夠經過將其與頁面的數據作簡單比較，看是否一致。

三、Response顯示的內容與Preview裏面的同樣，只是Response裏面的內容還未進行格式處理。
四、Cookies顯示資源HTTP的Request和Response過程當中的Cookies信息，在Application中也能夠查看。不是全部的資源都有Cookies。

五、Timing顯示資源在整個請求生命週期過程當中各部分花費的時間，實際功能測試時用的很少，若是想詳細的瞭解能夠訪問下面的連接：

  1. https://blog.csdn.net/lhz_333/article/details/93544313?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
  2. http://www.javashuo.com/article/p-yjxuiybj-eu.html

 

 

6.一、Filter過濾器

客戶端發送http請求後，會向服務端加載圖片，js動畫等資源，這些資源所有顯示在Requests Table列表中，過濾器選擇「All」時顯示全部的資源，若是隻想查看接口信息時選擇「XHR」過濾。

選擇「All」時Requests Table列表顯示全部的資源：
過濾器選擇「XHR」時，只顯示接口信息：

7.一、緩存

7.1.一、Disable cache

在已加載緩存信息時，若是這時須要驗證剛部署的版本，遇到問題沒解時能夠勾選「Disable cache」，而後刷新頁面從新驗證下。勾選「Disable cache」刷新頁面的過程當中，客戶端不會使用本地緩存，從新從服務端加載資源。

須要注意的是該方法不是適用於全部的客戶端。Android端App的H5頁面由於機制可能不一樣，不必定適用。Web端直接清理全部的歷史信息來清除緩存。有的PC端桌面應用內嵌了Chrome DevTools工具時，能夠在H5頁面使用該功能。

7.1.二、清除緩存

有的客戶端測試H5頁面時沒有清理緩存功能，可使用Chrome DevTools工具清理，瀏覽器和Android系統仍是經過應用去刪除緩存更方便、穩定。

方法步驟以下圖：

注意：有的打開Chrome DevTools工具時沒有Resources，能夠進入「Application」查找。