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

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

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

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

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

頁(yè)面元素分析

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

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

JavaScript解釋器

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

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

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

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

其他

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

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

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

小結(jié)

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