谷歌瀏覽器控制台調試匯總

前言

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

 

在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里還可以查看報告；等等這些不一一詳敘啦！