前言

　　作為自動化測試人員，如何僅僅通過谷歌瀏覽器實現除錯工作呢？本篇記錄了常見的除錯場景以及解決方式。

在Elements控制檯進行元素定位

　　F12開啟控制檯後，Elements裡以html的形式記錄了當前頁面。按ctrl+f，搜尋框支援xpath定位哦！方便我們快速編寫用例的page層，如下。（什麼？你用的是外掛工具進行定位的，好吧，如果你覺得管理方便也行）

在Element控制檯進行元素修改

　　在修改頁面字型內容，css樣式大小時，可以採用此方式，直接對html裡面的元素進行操作即可哦。比如我將“百度一下”改為“百度兩下”。

在network控制檯檢視介面

　　這個控制檯用的還是挺多的，常見的技能點包括：preserve log（保留日誌）；XHR（僅看介面）；Time（檢視時間）；禁用標誌（用於重新載入）

在Application控制檯進行cookie、session操作

　　這個控制檯一般用於session或cookie的清除、修改等，測前端與狀態相關的邏輯時會需要用到的。

在console控制檯裡進行json展開

　　network的介面響應的json資料進行展開，右鍵copy project或者copy value，在console裡賦給一個變數，使用copy方法，最後再貼上即可。

# 將響應的json賦給一個變數
var arr = "右鍵copy project之後在這裡貼上"

# 複製到剪貼簿之後，再次貼上即會自動展開。
copy(arr)

在console控制檯裡進行json提取

　　network的介面響應的json資料進行提取，右鍵copy project，在console裡賦給一個變數。若只提取物件格式用點，若提取列表格式用map。如下所示。

# 將響應的json賦給一個變數
var arr = {
    "code":200, 
    "list":[{"id":111},{"id":222}]
}

# 以列表方式返回（這一串可以也放在console.log()裡）
arr.list.map(item=> item.id)

# 以列表方式返回
arr.list.map(item=>item.id).join(',')

其他類似除錯場景

微信開發者工具常用除錯

　　儲存介面：右鍵save as...，但該功能不太穩定；主要用於提取介面特徵；

　　啟動卡頓：需要定期清理cookie，見選單欄。

後記

　　上述是常見的控制檯的除錯工作，當然控制檯包括了很多功能，有一些不常用的就懶得寫了，如在Source中進行斷點除錯、Performance裡通過記錄操作可以觀測本機和頁面效能；Lighthouse裡還可以檢視報告；等等這些不一一詳敘啦！