前端開發(fā)離不開瀏覽器 | 前端調(diào)試離不開控制臺
我要開始寫代碼了→想看一下效果→打開瀏覽器→不滿意或者出問題了→想要調(diào)試一下→打開控制臺→主角出場?↓↓↓
嗯~沒錯(cuò)会涎！就是這些。（Tips：打開方式主要有F12疯攒、ctrl+shift+i、右鍵檢查列荔、手動(dòng)點(diǎn)擊工具欄）
我們?nèi)粘ｉ_發(fā)過程中經(jīng)常會遇到不容易理解的行為出現(xiàn)敬尺，這個(gè)時(shí)候我們就要打開控制臺（即開發(fā)者工具）來排查或解決我們的問題。
其實(shí)控制臺不僅僅是協(xié)助我們調(diào)試的工具贴浙，還能很大程度上提升我們的生產(chǎn)力砂吞。
功能主要包括：審查元素、PC與移動(dòng)端視圖切換崎溃、查看元素蜻直、輸出值、查看源文件袁串、監(jiān)測網(wǎng)絡(luò)請求概而、內(nèi)存分配信息、安全性信息般婆、本地存儲、性能分析等朵逝。
由于內(nèi)容較多蔚袍，因此先從元素(elements)說起。
1.點(diǎn)擊左上角的小箭頭配名，然后選中頁面上的元素
當(dāng)鼠標(biāo)懸浮在該元素上時(shí)啤咽，會展示出當(dāng)前的標(biāo)簽、大小渠脉、顏色宇整、字體、外邊距等屬性芋膘，可用于快速查看這些基本信息鳞青。當(dāng)單擊鼠標(biāo)時(shí)，元素面板中會自動(dòng)定位到該元素的位置處为朋，并且右邊會出現(xiàn)樣式臂拓、監(jiān)聽事件等屬性面板。
會顯示出應(yīng)用在當(dāng)前元素上的所有樣式信息习寸，包括自身樣式胶惰、繼承樣式、代理樣式等霞溪》踔停可追加中捆、修改、取消相應(yīng)的屬性坊饶，單擊上方:hov可強(qiáng)制設(shè)置元素的狀態(tài)泄伪，如：:active、:hover幼东、:focus等臂容，單擊.cls可為元素添加新的類名，單擊加號可以新建樣式規(guī)則根蟹。最下方為元素經(jīng)過計(jì)算之后得到的盒子模型脓杉，可在計(jì)算樣式面板查看更詳細(xì)信息，計(jì)算樣式面板展示了所有非默認(rèn)屬性經(jīng)過層疊覆蓋最終得到的樣式信息简逮，布局面板主要用來查看grid網(wǎng)格布局與flex彈性布局球散。（Tips：對于屬性值為數(shù)值類型，可通過上下按鍵來調(diào)整散庶，步長為1蕉堰，按住shift步長為10，按住ctrl步長為100悲龟。顏色可以通過點(diǎn)擊小方塊來細(xì)致調(diào)整）
會顯示出當(dāng)前元素所有被綁定或會觸發(fā)的事件（包括冒泡以及事件委托）屋讶，展開不同的事件類型，可以查看該事件綁定所在的文件中的位置须教，一般用于快速定位到事件發(fā)生的位置皿渗，從而可以進(jìn)行打斷點(diǎn)等操作。
2.可在元素上面右鍵進(jìn)行更多的操作
在元素節(jié)點(diǎn)與文本節(jié)點(diǎn)上面進(jìn)行右鍵轻腺，會展示不同的控制面板乐疆，基本上所有的操作都以字面上的意義去理解就可以。需要特殊說明的是元素也可以打斷點(diǎn)贬养，有三種觸發(fā)條件：元素屬性變化挤土、移除元素、子元素變化误算，如果在打完斷點(diǎn)之后仰美，發(fā)生上述情況，那么就會自動(dòng)跳轉(zhuǎn)到相應(yīng)的執(zhí)行代碼的文件所在位置儿礼。注意：如果狀態(tài)改變已經(jīng)發(fā)生了筒占，打斷點(diǎn)是沒有作用的，并且刷新頁面之后會清除斷點(diǎn)蜘犁，這個(gè)與在源文件中的斷點(diǎn)是不同的翰苫，不會一直保留斷點(diǎn)。因此遇到這種情況可以在js中設(shè)置斷點(diǎn)或debugger，并且是在頁面加載完但代碼還沒有執(zhí)行的時(shí)候奏窑，這樣可以手動(dòng)給元素設(shè)置斷點(diǎn)之后导披，再繼續(xù)執(zhí)行代碼，那么發(fā)生上述改動(dòng)時(shí)埃唯，就會觸發(fā)斷點(diǎn)功能撩匕，跳轉(zhuǎn)到代碼執(zhí)行的位置。
3.快速引用元素來查看屬性等信息
有時(shí)候我們可能需要打印一些頁面中的元素墨叛，但是通過在代碼中輸出或者通過選擇器查詢顯得不是很靈活止毕，這種情況下可以使用元素別名來達(dá)到引用的效果，在頁面中單擊元素之后漠趁，可以看到后面出現(xiàn)了?==?$0?的字樣扁凛，這個(gè)時(shí)候我們可以在控制臺使用$0來輸出該元素，并且可以直接進(jìn)行元素的所有操作闯传。注意：當(dāng)沒有任何選中元素時(shí)谨朝，輸出$0會報(bào)錯(cuò)，$0永遠(yuǎn)指向最新的選中元素甥绿，并且$1指向次新字币，以此類推，最多到$4共五個(gè)元素引用共缕。（Tips：如果是用vue開發(fā)的頁面洗出，那么可以使用$0.__vue__來引用當(dāng)前元素的vue實(shí)例，其他同理图谷，調(diào)試場景可自行拓展）
總的來說
元素面板提供的功能是非常強(qiáng)大的翩活，其實(shí)還有很多便利性的功能，可以極大的幫助開發(fā)者快速發(fā)現(xiàn)問題蜓萄、定位問題隅茎、排查問題澄峰、解決問題嫉沽。甚至沒有問題的時(shí)候也能夠幫助開發(fā)者提升生產(chǎn)力。希望掌握這些技能之后能減少我們的痛苦折磨與頭禿預(yù)警俏竞。目前元素面板只介紹這些常用的操作绸硕，后續(xù)可增加更多調(diào)試小技巧。
與其他面板配合使用魂毁，希望我們以后代碼擼得越來越爽玻佩，越來越輕松。
