-
打開測試網址：
f12 打開開發者工具：
控制檯介紹：
Elements：頁面元素，可以進行編輯，保存後實時查看頁面效果
Network： 查看js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。點擊請求地址，會把請求的頭信息和響應信息等數據展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發送數據，直接預覽出來了。
-
Sources：次功能是js頁面調試中最突出的功能，上圖。
功能介紹：左側sources目錄可以展開，查看加載本頁面所調用的資源，如js，css，php。此處先介紹斷點調試，可以順序的看到程序的執行過車，勾選右側的Any XHR 按鈕，上圖。一步一步執行，如添加數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在代碼行處單擊設置斷點，英文選項是
add breakpoints，單擊右擊都可以，最是好用，上圖，還可以查看你設置的所有斷點，右側展開，如圖，斷點調試用的比較多，當然了還可以在js裏直接寫代碼，查看實時數據變化，查看要注意ctrl+s 保存操作。
-
Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數供參考，上圖。
Profile：次功能主要測試加載文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不着。
-
Resources：次功能是查看加載頁面所用的資源，鏈接的數據庫，域名下保存的cookie信息等都可以查看，上圖，點擊左側欄目，依次查看。
Audits：次功能也是性能測試，上圖，點擊run執行，查看效率，不是很重要，上圖。
-
Console：此功能是模擬js控制檯，直接寫代碼，查看結果，上圖。高級功能使用時開啓斷點，查看變量的變化過程。還可以條用函數，上圖。還有好些工能需要我們慢慢的學習分享。