前端開發(fā)最重要的工具——F12開發(fā)者工具

瀏覽器的F12開發(fā)者工具，所指的開發(fā)者廣義上是所有開發(fā)者，但實(shí)際上這個工具更多的是為前端開發(fā)工作者而設(shè)計的，它里面的所有功能都是圍繞著前端開發(fā)過程可能需要涉及到的內(nèi)容來添加的，所以F12開發(fā)者工具最準(zhǔn)確的定義應(yīng)該是前端頁面調(diào)試工具，那么接下來就讓我們來看看這個工具為什么是前端頁面調(diào)試工具吧。

 本篇文章與前兩篇F12開發(fā)者工具的介紹不存在沖突關(guān)系，甚至還是姐妹篇的存在，一個工具當(dāng)你用在前端開發(fā)的時候那它就是前端開發(fā)工具，如果用它原本提供的功能來干其他的事情，那就是其他工具，正如另外兩篇文章介紹的：

將f12的網(wǎng)絡(luò)分析工具和頁面定位工具拿出來，就可以做一個爬蟲的頁面分析工具（詳見爬蟲開發(fā)者的網(wǎng)頁分析工具——F12開發(fā)者工具介紹！）

將f12的頁面定位工具單獨(dú)拿出來，就可以為自動化測試的頁面元素定位提供幫助（詳見自動化測試開發(fā)輔助工具——F12開發(fā)者工具介紹！）

頁面元素分析

作為一個前端開發(fā)工作者，一個頁面是有很多很多的元素構(gòu)成的，每個元素是否都達(dá)到了它應(yīng)該達(dá)到的效果，在過去我們只能用肉眼觀察的方法判斷元素是否達(dá)到應(yīng)有的效果，現(xiàn)在我們可以通過F12開發(fā)者工具來看了。

F12頁面元素的常用功能如上圖所示：我們可以先選中目標(biāo)元素，然后就可以看到這個元素的整條路徑的結(jié)果，方便進(jìn)行定位（CSS定位中這樣的層級結(jié)構(gòu)是組合選擇器需要了解的）；選中目標(biāo)元素后我們可以在右側(cè)直觀的看到這個元素的內(nèi)外邊距和邊框的具體數(shù)值，可以給我們提供一個判斷。在右側(cè)我們額可以看到這個元素所應(yīng)用的所有樣式，這里被覆蓋的樣式（指因為css權(quán)重不夠?qū)е略摌邮讲徽宫F(xiàn)）會使用中劃線劃掉，可以清楚的了解到自己的css在瀏覽器展示的時候那些css是不應(yīng)用的，方便修改css，右側(cè)的樣式查看窗口還可以進(jìn)行css樣式的篩選，比如使用：hov篩選就只能看到應(yīng)用在這個元素上的css偽類；最后在元素選擇按鈕旁有個切換設(shè)備仿真按鈕，點(diǎn)擊后可以切換屏幕的大小和分辨率，這一點(diǎn)對前端作媒體查詢（提供頁面適配）起到了相當(dāng)大的作用。

JavaScript解釋器

編譯型語言有編譯器，解釋型語言有解釋器。python有其專門的解釋器，java不僅有負(fù)責(zé)把java編譯成class二進(jìn)制文件的編譯器，還有JVM虛擬機(jī)作為解釋器。但很多JavaScript初學(xué)者并不知道JavaScript的解釋器是什么，其實(shí)關(guān)于JavaScript的JavaScript解釋器一直內(nèi)置在瀏覽器里，也就是F12開發(fā)者工具中。

 后來，谷歌瀏覽器帶著它的V8引擎出世了，V8引擎是一個性能相當(dāng)優(yōu)秀的JavaScript引擎。再往后基于V8引擎推出的nodejs，成為了真正的JavaScript運(yùn)行時，從此我們就可以在瀏覽器之外運(yùn)行JavaScript了。

如圖所示，JavaScript控制臺就是JavaScript的解釋器，我們可以像python一樣在控制臺以交互的形式使用JavaScript控制臺進(jìn)行編程。JavaScript的控制臺也是V8引擎（這里用edge使用的是谷歌的內(nèi)核，也是用的v8引擎）的輸出窗口，由上圖我們可以看到頁面輸出了一些錯誤和警告，這些錯誤和警告可以幫助我們更好的排查JavaScript的代碼錯誤。同時我們在調(diào)試的時候也可以通過打印的方式打印一些信息來進(jìn)行debug。

 有些互聯(lián)網(wǎng)大廠（比如上面的百度）會在控制臺這里打印一些信息，比如百度就在這里打印了招聘信息，小伙伴們可以找找還有哪些互聯(lián)網(wǎng)公司也在控制臺中留下了彩蛋。

其他

除了這兩個功能，其他功能對前端開發(fā)也有很重要的作用，在爬蟲開發(fā)者的網(wǎng)頁分析工具——F12開發(fā)者工具介紹！中我們用網(wǎng)絡(luò)分析工具來為爬蟲進(jìn)行網(wǎng)絡(luò)分析，但是實(shí)際上這個功能的最初目的是為了前后端交互時的頁面調(diào)試的，比如在網(wǎng)絡(luò)請求類型中有一個很重要的請求內(nèi)容叫XHR，就是前端的ajax請求。

如果是高級前端開發(fā)工程師（很明顯小編不是）他們還可以利用F12開發(fā)者工具的性能分析工具和內(nèi)存分析工具來對頁面進(jìn)行分析和優(yōu)化。

F12開發(fā)者工具中還有很多非常有用的功能，但囿于小編能力水平有限，只能舉出這些比較常用的功能，更多有用的功能還需各位讀者自行探索。

小結(jié)

以上就是F12開發(fā)者工具在前端頁面調(diào)試中的一些常用功能介紹了，更多實(shí)用工具的介紹和使用請關(guān)注W3Cschool的后續(xù)文章！