chrome開發者工具最常用的四個功能模塊：元素（ELements）、控制檯（Console）、源代碼（Sources），網絡（Network）。
元素（Elements）：用於查看或修改HTML元素的屬性、CSS屬性、監聽事件、斷點等。css可以即時修改，即時顯示。大大方便了開發者調試頁面
控制檯（Console）：控制檯一般用於執行一次性代碼，查看JavaScript對象，查看調試日誌信息或異常信息。還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行
源代碼（Sources）：該頁面用於查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，此外最重要的是可以調試JavaScript源代碼，可以給JS代碼添加斷點等。
網絡（Network）：網絡頁面主要用於查看header等與網絡連接相關的信息。
1、 元素（Elements）：
這個部分主要是顯示實時的DOM樹。在頁面中右鍵單擊" 審查元素 "，就會出現Elements的面板。
查看元素的代碼：點擊左上角的箭頭圖標（或按快捷鍵Ctrl+Shift+C）進入選擇元素模式，然後從頁面中選擇需要查看的元素，然後可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置
查看元素的屬性：定位到元素的源代碼之後，可以從源代碼中讀出該元素的屬性。如下圖中的class、src、width等屬性的值。
在一個DOM節點上點擊右鍵就會出現一個菜單，一共分為4部分
第一部分是添加和編輯節點的屬性，例如class等。
第二部分是編輯節點，點擊Edit as HTML，就可以像在編輯器中一樣編寫代碼，Copy as HTML就是複製代碼了，Delete node是整個刪除節點。
第三部分是添加DOM的斷點（給元素添加斷點）
如果我們添勾選了任何一個，就會在右邊欄的第五部分DOM breakpoints出現，這個頁面可以看到當前網頁的所有元素斷點。當元素被修改（通常是JS代碼修改），如果出現對應的事件（節點子樹改變、節點屬性改變、節點被移除），那麼頁面加載就會暫停，JS就會在相應的事件監聽函數那裡掛起。
底部顯示的是一個當前元素的所有祖先元素。例如，上圖中當前元素是body，它的祖先元素是html（也是父級元素），如果html有父級元素，仍然會顯示html的父級元素（這裡例子有點特殊）。
接下來看看右邊欄。一共有6部分，分別是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style顯示的是所選元素的最終樣式，如果勾選了Show all，將會顯示此元素的所有style屬性，Computed Style中的屬性是該元素經過計算之後的所有CSS屬性，即最後瀏覽器渲染頁面時使用的屬性是隻讀的，不能實時修改，所以主要用來查看元素的最終屬性值，屬性的計算由瀏覽器自動進行，是瀏覽器渲染頁面的一個必不可少的過程。
而第二部分Styles估計是用得最多的。這裡會顯示作用在所選元素的所有css規則，包含css文件中的樣式規則，還有user stylesheet和user agent stylesheet的樣式。樣式按照權重的大小排列，最上面的是權重最高的，下面是權重低的。最上面的element.style是元素的內嵌樣式。user stylesheet是用戶樣式，不過一般不會有人自定義樣式。user agent stylsheet是瀏覽器的默認樣式，通常的css reset就是將這個reset掉。背景不是灰色的部分是可以修改的樣式，我們對樣式的修改會實時顯示在頁面中，這就省去了我們為了修改幾個像素去修改css文件然後保存刷新的過程，同時也可以禁用和啟用某些樣式。在Styles的標題欄有一個鼠標箭頭的圖標，點擊之後就會出現偽類，因為一般情況下不會出現偽類的css規則。
2、控制檯（Console）
先上圖：不知道有多少人發現，在瀏覽器開發工具的"Console"上的百度首頁的關於百度招聘的信息：
Console面板在開發用來調試的時候比較多
api功能：
控制檯的核心對象是Console，如果我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行；或者用"console.dir(console)",同樣可以實現查看console對象的方法和屬性；
我們可以用console來調試js代碼：
對於某個功能不好使的時候開發就會先看看控制檯有沒有報錯，控制檯面板中一般會打印一些報錯信息，類似於APP日誌一樣，可以定位到哪個文件，幫助我們定位問題。
代碼執行到161行，如果想打印下"result"，就可以在Console中進行調試，輸入代碼："alert("result="+result);"回車即可，即可彈出result的結果；
或者是輸入代碼"console.log("result="+result);"直接打印結果也可，如下圖：
對於一些簡單的js語句，可以直接在控制檯中輸入來查看結果：
3、Sources面板：
打開sources面板;直接給某行js代碼設置斷點。
刷新頁面後，程序就會停在斷點設置的那一行上。
然後我們就可以在斷點那一行代碼的後面添加我們自己的debug代碼了，例如下面這樣：
按下快捷鍵Ctrl + s保存，發現該面板變紅了，即表示保存生效：
在單步調試過程中直接查看變量：
1、通過Sources - Watch面板，在這裡設置想要監控的變量，隨著單步調試的進行，這些被監控的變量的值也會隨之更新。
在最右側的狀態欄中，scope -> local，看到一些信息，otime是斷點374行的調試信息
2、通過console打印變量，除了在代碼裡寫console.log()外，其實是可以直接在單步調試的過程中直接用console來打印的，例如下圖：
也可以直接把鼠標放在想要查看的變量上面選擇它就可以看到變量值，如圖：
或者直接在控制檯中輸入該變量名回車：
設置好了斷點，下圖的這幾個按鈕就非常有用了，他們出現在右邊欄的頂部。
第一個按鈕（像播放一樣的按鈕）是暫停和開始。
F8：快捷鍵，執行到最後一步
如果我們想要跳過當前的斷點繼續執行js，就可以點擊這個按鈕，點擊之後js的執行會繼續，如果在接下來的執行過程中再次遇到斷點，那麼就會在那個斷點處暫停。
第二個按鈕：
F10：逐語句執行，執行到下一步
鼠標懸浮，會出現一段英語step over next function call（單步執行函數調用），可以理解為逐步執行或者逐語句執行，點擊這個按鈕。
點擊之後會發現程序進去下面一行，調試會一步步進行
向上的箭頭是返回按鈕，點擊之後會退出當前正在執行的函數，到達函數執行完畢的在狀態，如果是在全局作用域中，那麼會退出調試。最後一個按鈕是激活和反激活所有的斷點，如果當前的斷點是激活的，點擊之後所有的斷點將不起作用，再次點擊之後恢復作用。
常用的快捷鍵如下：
F8：快捷鍵，執行到最後一步
ctrl+F8禁用斷點
F10：逐語句執行，執行到下一步
F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試
調試小技巧：
1、直接修改頁面元素
選擇頁面上元素，右鍵"檢查"，會打開開發者工具窗口，顯示當前選擇元素的源代碼，可以雙擊進行修改。
如果要修改的東西比較多，可以摺疊元素並單擊選擇，再右鍵Edit as HTML修改。
2、顏色取色器
選擇頁面上元素，右鍵"檢查"，會打開開發者工具窗口，在Styles窗口中，點擊一個樣式的color右邊小方塊（如沒有color可自己輸入如color:red），會彈出顏色拾取器，可以在上面顏色畫板上選擇一個顏色，也可以選擇"筆"圖標可以拾取頁面上元素的顏色。
3、快速查找並定位文件
查看源代碼，鼠標移到開發工具窗口，按ctrl+p，輸入鏈接地址的前幾個字母，會自動聯想顯示所有符合條件的地址，點擊打開即可。（有時第一次打開是空白內容，可再點擊一次鏈接）
打開之後，如果是js內容，就可以直接在上面打斷點調試。
