一、Chrome開發者工具簡介

瀏覽器的開發者工具(DevTools)可以幫助開發人員對網頁進行佈局，比如HTML+CSS，幫助前端工程師更好的除錯指令碼（JavaScript、jQuery）之類的，還可以使用工具檢視網頁載入過程，獲取網頁請求（抓包）等。對於測試工作者來說，主要用於獲取網頁請求（抓包），還可以輔助UI自動化測試中的元素定位等，其它應用正在挖掘中。

1.1、開發者工具(DevTools)呼叫

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

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

##使用注意：

1. 瀏覽器中每開啟一個新頁面時，需要重新呼叫開發者工具；
2. 桌面應用中每開啟一個新的H5頁面之前，需要關閉上一個頁面的工具，然後在新的頁面重新呼叫開發者工具；

二、Chrome DevTools詳細介紹

1.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.1、元素(Elements)詳解

Elements模組展示的就是頁面的各個組成，主要內容有HTML+CSS+JavaScript，可以對元素進行檢視、修改、刪除等操作。

2.1.1、元素編輯

通過(Chrome DevTools)中的箭頭，可以檢視頁面具體某個圖片，輸入框等的元素。首先點選箭頭，然後在頁面點選想要檢視的元素。

以百度的輸入框為例：

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

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

2.1.2、輔助元素定位

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.3、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.1、控制檯（Console）詳解

在Console中可以檢視JavaScript的物件及屬性，也可以直接寫JavaScript執行。在測試工作中應用主要有如下幾個場景：
1、有些APP、桌面應用內嵌了H5頁面的，有時遇到Bug了可以使用JavaScript的Location 物件取出當前H5頁面的完整URL，然後丟給開發。在工具中輸入location.href,彈出的URL中右鍵選擇“Copy link address”即可完成複製。

4.1、原始碼(Sources)詳解

原始碼(Sources)模組主要是檢視頁面HTML、JavaScript等原始碼，對於測試來說該模組的斷點除錯功能會用到。測試過程中頁面有些提示、動畫效果等只展示幾秒時，可以通過打斷點暫停效果顯示。

以toast提示為例，toast提示的展示效果只有幾秒鐘，有時錯誤的toast內容很長，可以將效果暫停後再仔細檢視提示內容。效果如下圖：

在UI自動化測試時，需要對toast提示定位時，也可以暫停後在Elements模組中定位元素。

5.1、網路（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.1、Requests Table(請求列表)

此列表列出了檢索的每個資源。預設情況下，此表按時間順序排序，也就是最早的資源在頂部。單擊資源名稱可以獲得更多資訊。提示：右鍵單擊列表的任何標題欄可以以新增或刪除資訊列。

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

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

5.1.2、資源詳細資訊

點選某個資源的Name可以檢視該資源的詳細資訊，根據選擇的資源型別顯示的資訊也不太一樣，可能包括如下Tab資訊：

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

1、 Headers頁面中包含的http請求以及響應資訊等，可以檢視該資源、介面的狀況，具體的資料含義如下：

Status Code:響應狀態碼能夠直觀的瞭解介面的情況，200-能夠正常訪問資源，404-請求的資源（網頁等）不存在，500-內部伺服器錯誤等。

請求頭中的content-type、查詢字串格式的引數、Request Payload等都是介面自動化時需要的引數。

2、Preview頁面可以檢視服務端返回的json資料，並且按照JavaScript的物件格式展示預覽。層層展開後可以看到具體的資料，有時定位前後端bug時可以通過將其與頁面的資料做簡單比較，看是否一致。

3、Response顯示的內容與Preview裡面的一樣，只是Response裡面的內容還未進行格式處理。
4、Cookies顯示資源HTTP的Request和Response過程中的Cookies資訊，在Application中也可以檢視。不是所有的資源都有Cookies。

5、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. https://www.cnblogs.com/cherryblossom/p/5502591.html

6.1、Filter過濾器

客戶端傳送http請求後，會向服務端載入圖片，js動畫等資源，這些資源全部顯示在Requests Table列表中，過濾器選擇“All”時顯示所有的資源，如果只想檢視介面資訊時選擇“XHR”過濾。

選擇“All”時Requests Table列表顯示所有的資源：
過濾器選擇“XHR”時，只顯示介面資訊：

7.1、快取

7.1.1、Disable cache

在已載入快取資訊時，如果這時需要驗證剛部署的版本，遇到問題沒解時可以勾選“Disable cache”，然後重新整理頁面重新驗證下。勾選“Disable cache”重新整理頁面的過程中，客戶端不會使用本地快取，重新從服務端載入資源。

需要注意的是該方法不是適用於所有的客戶端。Android端App的H5頁面因為機制可能不同，不一定適用。Web端直接清理所有的歷史資訊來清除快取。有的PC端桌面應用內嵌了Chrome DevTools工具時，可以在H5頁面使用該功能。

7.1.2、清除快取

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

方法步驟如下圖：

注意：有的開啟Chrome DevTools工具時沒有Resources，可以進入“Application”查