本文章轉載于搜狗測試

chrome瀏覽器有很多N×閃閃的插件，比如Proxy SwitchySharp、Awesome Screenshot、AdBlock等，還有一些插件還會給我們的測試工作帶來便利，比如jsonview、EyeDroper、MeasureIt等，除此之外chrome內核還自帶了一款功能強大的開發者工具，今天來說說chrome開發這工具的一些常用的而且能幫到我們測試工作的功能。

Elements：

這應該是最常用的功能了吧，通過開發者工具左上角的放大鏡標志，查找頁面元素的html代碼位置：

應用場景：頁面某處顯示異常（鏈接錯誤、圖片錯誤等）時，可以定位是否是代碼寫法錯誤。

network：

chrome開發者工具集成的http抓包工具，可以用來獲取當前頁面的所有http請求，功能與fiddler類似；

優勢：

1、輕量級

2、只抓當前頁面的請求

3、支持任何代理下抓包

4、支持過濾器

5、支持精簡模式；

使用場景：

1、分析頁面內異步請求的正確性

2、分析http接口的正確性；

Sources：

Sources，顧名思義，是當前頁面的文件，這里文件指js、css等頁面引入的腳本；

優勢：

1、展示當前頁面內的js腳本；

2、可斷點調試；

使用場景：

1、頁面動態功能異常時，可以通過找到實現動態功能的代碼，斷點調試，來定位問題；

2、頁面顯示異常時，查找頁面是否有被注入惡意js代碼；

Resources：

常用的幾項如下，

使用場景：

1、頁面內容展示異常時，可以定位頁面是否正確加載了此資源；

2、查看當前域下的LocalStorage的值

3、查看當前域下SessionStorage的值

4、查看當前域下cookie的值

Console：

開發者工具控制臺，支持頁面當前已定義的方法的調用、元素查找、頁面本身屬性的查找

使用場景：

1、驗證頁面方法的正確性，通過直接在控制臺調用頁面定義的方法，來確認方法定義是否存在問題；

2、查看頁面報錯：如果頁面里有錯誤，控制臺會打印出錯誤并且定義到錯誤行；

3、獲取頁面內想要的任意元素；

4、查看頁面代碼內打印的log；