作為一個(gè)前端開發(fā)人員吮龄，熟練運(yùn)用各種瀏覽器中的開發(fā)者工具是必備的技能之一，接下來介紹主流瀏覽器Chrome的開發(fā)者工具
Chrome開發(fā)者工具面板
面板上包含了Elements面板树枫，Console面板，Sources面板，Network面板形耗，Timeline面板彻磁，Profiles面板碍沐，Application面板狸捅，Security面板，Audits面板等這些面板功能累提。
這些按鈕的功能點(diǎn)如下：
Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋尘喝。
Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell斋陪。
Sources:斷點(diǎn)調(diào)試JS朽褪。
Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個(gè)請求資源信息（包括狀態(tài)、資源類型无虚、大小缔赠、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化骑科。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件橡淑，以此可以提高網(wǎng)頁的運(yùn)行時(shí)間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時(shí)咆爽，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)梁棠、顯示JS對象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)斗埂。
Application:記錄網(wǎng)站加載的所有資源信息符糊，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage呛凶、IndexedDB男娄、Web SQL、Cookies）漾稀、緩存數(shù)據(jù)模闲、字體、圖片崭捍、腳本尸折、樣式表等。
Security:判斷當(dāng)前網(wǎng)頁是否安全殷蛇。
Audits:對當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況实夹、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議粒梦。比如列出所有沒有用到的CSS文件等亮航。注： 這一篇主要講解前三個(gè)面板Elements、Console匀们、Sources缴淋。
lements面板
實(shí)時(shí)編輯DOM節(jié)點(diǎn)和CSS樣式
雙擊DOM樹視圖里面的節(jié)點(diǎn)，可以實(shí)時(shí)編輯標(biāo)簽屬性，修改的效果會(huì)立刻反應(yīng)在瀏覽器里面
點(diǎn)擊右側(cè)的Style面板宴猾，可以實(shí)時(shí)修改Css的屬性值,在這里的所有樣式Name和Value都是可以編輯的圆存，在屬性后面單擊可以添加新的樣式叼旋，如圖：
點(diǎn)擊右側(cè)的Computed面板仇哆，可以編輯左側(cè)選中的盒子模型參數(shù)，所有的值都是可以修改的夫植；點(diǎn)擊不同的位置（top,bottom,left,right）就可以修改元素的padding,border,margin屬性值讹剔。
查看網(wǎng)頁的本地修改歷史
點(diǎn)擊Styles面板中修改過屬性的文件名，會(huì)跳轉(zhuǎn)到Source面板
在文件位置右擊選擇Localmodifications,可以查看本地的所有修改記錄
Console面板‘
控制臺輸出日志
通過JS代碼或者命令行console.log(),console.warn(),console.error()可以將日志信息輸出到控制臺
console.log()顯示一般的基本日志信息详民，當(dāng)要顯示的基本日志太多時(shí)可以使用console.group將相關(guān)的日志進(jìn)行分組延欠。
console.warn()顯示帶有黃色小圖標(biāo)的警告信息。
console.error()顯示帶有紅色小圖標(biāo)的紅色的錯(cuò)誤的信息沈跨。
