瀏覽器的F12開發(fā)者工具，所指的開發(fā)者廣義上是所有開發(fā)者，但實際上這個工具更多的是為前端開發(fā)工作者而設計的，它里面的所有功能都是圍繞著前端開發(fā)過程可能需要涉及到的內容來添加的，所以F12開發(fā)者工具最準確的定義應該是前端頁面調試工具，那么接下來就讓我們來看看這個工具為什么是前端頁面調試工具吧。
本篇文章與前兩篇F12開發(fā)者工具的介紹不存在沖突關系，甚至還是姐妹篇的存在，一個工具當你用在前端開發(fā)的時候那它就是前端開發(fā)工具，如果用它原本提供的功能來干其他的事情，那就是其他工具，正如另外兩篇文章介紹的：
將f12的網(wǎng)絡分析工具和頁面定位工具拿出來，就可以做一個爬蟲的頁面分析工具（詳見爬蟲開發(fā)者的網(wǎng)頁分析工具——F12開發(fā)者工具介紹！）
將f12的頁面定位工具單獨拿出來，就可以為自動化測試的頁面元素定位提供幫助（詳見自動化測試開發(fā)輔助工具——F12開發(fā)者工具介紹！）
頁面元素分析
作為一個前端開發(fā)工作者，一個頁面是有很多很多的元素構成的，每個元素是否都達到了它應該達到的效果，在過去我們只能用肉眼觀察的方法判斷元素是否達到應有的效果，現(xiàn)在我們可以通過F12開發(fā)者工具來看了。
F12頁面元素的常用功能如上圖所示：我們可以先選中目標元素，然后就可以看到這個元素的整條路徑的結果，方便進行定位（CSS定位中這樣的層級結構是組合選擇器需要了解的）；選中目標元素后我們可以在右側直觀的看到這個元素的內外邊距和邊框的具體數(shù)值，可以給我們提供一個判斷。在右側我們額可以看到這個元素所應用的所有樣式，這里被覆蓋的樣式（指因為css權重不夠導致該樣式不展現(xiàn)）會使用中劃線劃掉，可以清楚的了解到自己的css在瀏覽器展示的時候那些css是不應用的，方便修改css，右側的樣式查看窗口還可以進行css樣式的篩選，比如使用：hov篩選就只能看到應用在這個元素上的css偽類；最后在元素選擇按鈕旁有個切換設備仿真按鈕，點擊后可以切換屏幕的大小和分辨率，這一點對前端作媒體查詢（提供頁面適配）起到了相當大的作用。
JavaScript解釋器
編譯型語言有編譯器，解釋型語言有解釋器。python有其專門的解釋器，java不僅有負責把java編譯成class二進制文件的編譯器，還有JVM虛擬機作為解釋器。但很多JavaScript初學者并不知道JavaScript的解釋器是什么，其實關于JavaScript的JavaScript解釋器一直內置在瀏覽器里，也就是F12開發(fā)者工具中。
后來，谷歌瀏覽器帶著它的V8引擎出世了，V8引擎是一個性能相當優(yōu)秀的JavaScript引擎。再往后基于V8引擎推出的nodejs，成為了真正的JavaScript運行時，從此我們就可以在瀏覽器之外運行JavaScript了。
如圖所示，JavaScript控制臺就是JavaScript的解釋器，我們可以像python一樣在控制臺以交互的形式使用JavaScript控制臺進行編程。JavaScript的控制臺也是V8引擎（這里用edge使用的是谷歌的內核，也是用的v8引擎）的輸出窗口，由上圖我們可以看到頁面輸出了一些錯誤和警告，這些錯誤和警告可以幫助我們更好的排查JavaScript的代碼錯誤。同時我們在調試的時候也可以通過打印的方式打印一些信息來進行debug。
有些互聯(lián)網(wǎng)大廠（比如上面的百度）會在控制臺這里打印一些信息，比如百度就在這里打印了招聘信息，小伙伴們可以找找還有哪些互聯(lián)網(wǎng)公司也在控制臺中留下了彩蛋。
其他
除了這兩個功能，其他功能對前端開發(fā)也有很重要的作用，在爬蟲開發(fā)者的網(wǎng)頁分析工具——F12開發(fā)者工具介紹！中我們用網(wǎng)絡分析工具來為爬蟲進行網(wǎng)絡分析，但是實際上這個功能的最初目的是為了前后端交互時的頁面調試的，比如在網(wǎng)絡請求類型中有一個很重要的請求內容叫XHR，就是前端的ajax請求。
如果是高級前端開發(fā)工程師（很明顯小編不是）他們還可以利用F12開發(fā)者工具的性能分析工具和內存分析工具來對頁面進行分析和優(yōu)化。
F12開發(fā)者工具中還有很多非常有用的功能，但囿于小編能力水平有限，只能舉出這些比較常用的功能，更多有用的功能還需各位讀者自行探索。
小結
以上就是F12開發(fā)者工具在前端頁面調試中的一些常用功能介紹了，更多實用工具的介紹和使用請關注W3Cschool的后續(xù)文章！
