Chrome調試工具簡單介紹

做爲前端開發者都知道，快捷鍵F12能夠打開chrome調試工具。firefox能夠打開firebug工具。「工欲善其事，必先利其器」，對調試工具的掌握，能大大提升咱們調試代碼的效率。由於我日常chrome用的多，這裏就大概介紹下chrome調試工具在windows下的使用，firefox的話就暫時不作介紹。

 

快捷鍵

ctrl+o 在Sources面板中打開一個文件(JS,CSS)
ctrl+p 同ctrl+o
ctrl+f  查找當前文件中的關鍵字
ctrl+shift+f 全局查找關鍵字
ctrl+shift+e 在控制檯運行當前選中的代碼片斷，這個方法能夠用來在控制檯中打印出變量或方法的返回值。
ctrl+shift+o 跳轉到指定的方法

 

Elements面板

Elements面板是控制DOM結構和CSS樣式的。

位置1：點擊後選擇頁面中的任何元素，就會選中相應的DOM節點

位置2：Toggle Device Mode切換設備模式，能夠模擬該頁面在各類移動端設備的顯示狀況。

位置3：Edit as HTML,選中某段html代碼後能夠直接編輯這段html代碼。能夠直接拖放節點，自由調整位置。也能夠拖拽節點到編輯器。

位置4：Delete 直接刪除該節點。

位置5：Event Listeners能夠查看該元素所綁定的事件。

位置6："Computed"面板裏，點擊樣式前面的放大鏡圖標，就能夠直接定位到具體的樣式。當樣式層級較深，繼承較多時，對調試頁面的樣式頗有幫助。

 

Network面板

Network面板是查看網絡請求信息的。

位置1：filter過濾器，可在輸入框中輸入關鍵字搜索對應請求的文件。

位置2：請求文件的列表裏進行了分類，我的經常使用的是查看XHR的分類，查看Ajax請求。

位置3：設置網絡的通訊方式。默認"No thirotting"不節流。這裏能夠設置斷網模式，或者模擬3G，4G網絡等狀況下頁面加載的速度。網速能夠在"settings"裏面設置。

位置4：列表裏能夠查看每一個xhr的消耗時間。若是time超出200ms,須要考慮優化接口。 

位置5：面板最底部能夠查看請求的總個數,DomContentLoaded的時間，頁面load的時間。

 

Sources面板

sources面板是調試中最經常使用的地方。

位置1：查看頁面中加載的資源文件

位置2：若是瀏覽器裝了插件，插件所須要的JS文件會在這裏顯示

位置3：使用ctrl+p/ctrl+o 打開某個文件

位置4：斷點的操做

位置5：查看異步請求時所設置的定時器

位置6：點擊右邊的加號，能夠增長監聽的變量。不過鼠標放到JS文件中的變量時也會顯示對應的值。

位置7：設置各類不一樣的斷點。

　　當勾選XHR Breakpoints裏的any XHR時，頁面中觸發Ajax請求時都會中斷。

　　當勾選"Event listener breakpoint" 下的 Mouse（鼠標）下的 Click （單擊）事件時，觸發某個按鈕的點擊事件就會中斷。

位置8：通常線上的代碼都是打包後的代碼，不利於調試。點擊{}後格式化該文件。

 

 

Timeline面板

 Timeline面板是查看動態流的。在這裏能夠測試頁面的性能問題。好比頁面的渲染速度，動畫的流暢度等。

位置1：點擊這個按鈕開始Record，按鈕變成紅色，再次點擊中止記錄。

位置2：選擇記錄生成的圖表模式

位置3：須要記錄的類型

位置4：fps指每秒的幀數，這個能夠衡量頁面的渲染速度。若是低於60fps，則頁面可能須要優化下了。若是低於30fps，則頁面的卡頓現象會比較嚴重。

位置5：記錄期間頁面加載的比重。看哪一個範圍的值特別大，佔用時間最長，而後有針對性的優化。 

 

Profiles面板

這個使用較少，先暫時不作介紹。

 

Resources面板

resources面板展現各類資源文件，包括本地存儲，session,cookies,cache等信息

 

Console面板

console控制檯輸出信息，console的方法有不少種，包括console.log(),console.info(),console.error(),console.table()等。

 

Settings 選項

勾選下面這個選項後就會在控制檯中打印出全部的Ajax請求地址。

 

參考資料：

http://get.ftqq.com/5982.get

http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/