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