浏覽器就是前端開發者的ide。作為一個前端開發者，浏覽器devtool是很有必要熟悉起來的。
說到這裡，我不由得想起了兩年前第一次看到當時帶我入門前端的老大熟練地用浏覽器來調節css。感覺就像是開了一扇新天地的大門，原來我們常常使用的浏覽器竟然還有這些隐秘的功能。
不知不覺兩年過去，自己實實在在地使用浏覽器調試工具中獲益非淺。網上關于浏覽器工具的使用有很多文章，這裡我也來做一些總結，算是自己的一些經驗之談。畢竟工具是死的，要如何的靈活運用，才可以發揮它最大的威力。而這就需要一個經驗積累的過程。
Elements面闆
左邊可以看到dom結構。這個dom結構，不是網頁源代碼中的結構。而可能是經過你的js處理之後的結構。比如你用js添加了一些東西在頁面上。也是可以在這裡看到的。也就是說你在這裡看到的結構，并不是你右鍵檢視源代碼所看到的結構。 選中dom節點，可以右鍵選擇編輯。包括内容。dom節點。也可以删除。也支援ctrl+z恢複操作。 同時也可以為dom節點添加斷點。當dom節點發生變化 的時候，代碼會停在修改這個dom節點的js代碼的位置。 也可以看到dom節點上邊綁定了哪些事件。 右邊是樣式。用滑鼠選中某個節點，就可以在右邊看到它所有的樣式。包括内聯樣式以及引入的樣式。 單獨為其寫的樣式和繼承過來的樣式。 會按照優先級從高到低排列。 是以我們可以看到下面的很多樣式都被劃上了删除橫線。多半是因為優先級低樣式被覆寫。 另外樣式前面有很多選擇框，把前面的√點掉，這個樣式就失效了。 如果後面有優先級稍低的其他樣式，它就會跟上來作用到節點上。 然後是computed. 這裡的樣式是計算過的樣式。 可以看到它的盒模型圖。 也可以看到它所有的樣式。點開可以看到具體是哪一個樣式最終産生作用。
Console面闆 主要是用來做一些自定義的輸出以及一些報錯資訊。 也有很多公司在控制台輸出招聘資訊，，比如百度。 這裡先不細寫。功能比較基礎。 cosole面闆的作用域。 一般情況下是全局作用域，斷點時是斷點運作中的那個方法體的作用域。 如果element面闆裡點到一個iframe中去，這個時候作用域可能是這個iframe中，使用document.get....可以找到iframe中的dom。
Sources面闆 可以看到頁面用到的各種資源，包括js。css。圖檔等等。以及它們分别是來自哪個域名。 可以給js代碼設定斷點。 右邊可以看到目前設定的斷點情況。以及作用域中的參數的值和調用棧。
格式化代碼。點左下的括号，可以把代碼用格式化後的代碼顯示出來，友善閱讀。包括壓縮過的代碼。 調用棧。Call Stack 可以看到一個函數是在哪裡調用的。
部落客這樣常常需要去看其他同僚寫的代碼的，你知道它一定會調用了某個方法，但是你不知道是哪裡調用的，就可以給它打個斷點。然後觀察它的調用棧。很容易就理清了某個功能的實作脈絡。
斷點停下來的時候。在console控制台可以console出目前位置的活動環境的作用域中的值，比如 可以看到目前函數的活動環境下的this的值。 可以很友善的看到某個功能子產品對象中的各個值是否跟設想的一樣。進而發現問題，糾正自己的思路，一步步地完善代碼。
在斷點調試的過程中，如果你的js是寫在單獨的檔案中。就可以直接修改代碼，然後ctrl+s儲存，再運作的時候就可以運作你修改後的代碼。 這樣可以直接在浏覽器中邊修改邊調試。效率能提高不少。
在js代碼中寫 debugger;會自動斷點到該位置。
Network面闆 這是很重要的一個面闆。 可以看到頁面所有的網絡請求的情況。包括請求時間，資源大小，類型，狀态碼等等。 同時點開單個資源，可以看到該資源的http頭資訊。資源請求類型，form送出内容，伺服器傳回的結果等等。 特别是調試ajax的時候，可以很直覺地看到自己傳到伺服器的資料和伺服器傳回的資料結構。 勾選上面的 disabled cache。會禁用緩存，再重新整理該頁面的時候，所有資源都會重新從伺服器擷取。如果修改了js、css或圖檔資源 後重新整理頁面，勾上這個，就不會受緩存影響了。 勾選上preserve log。 意思是重新整理或跳轉頁面時不清空前面的頁面的log資訊。對于一些我們執行完某種操作就跳轉頁面的情況，我們勾上這個就能看到上一個頁面最後的操作，比如一個ajax請求的具體情況。上傳的參數對不對，傳回的結果正常不正常等等。 那個漏鬥形狀的按鈕，點開就會出現過濾欄。可以對下面清單中的資訊進行一些過濾。 包括檔案名，檔案類型等的過濾。 讓我們更快地找到我們要觀察的請求。 另一個很常用的功能，滑鼠移動到initator那一列，可檢視請求是哪個地方發送的，哪個js，哪個方法。
時間匆忙，先寫到這裡。後面再補充。本文不定期更新。 轉載請注明出處： http://blog.csdn.net/liusaint1992/article/details/52891841