F12常用於網站界面測試、調試，分析網頁所出現的問題，查看html元素、查看響應事件等方面。打開一個網頁，點擊F12，彈出一個窗口，其窗口的功能如下:
元素（Elements）
- 查看元素的代碼：點擊左上角的箭頭圖標（或按快捷鍵Ctrl+Shift+C）進入選擇元素模式，然后從頁面中選擇需要查看的元素，然后可以在開發者工具元素（Elements）一欄中定位到該元素源代碼的具體位置。
- 查看元素的屬性：定位到元素的源代碼之后，可以從源代碼中讀出改元素的屬性。
- 給元素添加斷點：在元素的右鍵菜單中選擇斷點選項（Break on…），選中之后，當元素被修改（通常是被JS代碼修改）時，頁面加載會暫停，然后可以查看該元素的屬性。元素斷點添加之后，可以在右側欄的DOM Breakpoints頁面中看到，這個頁面可以看到當前網頁的所有元素斷點。
- 查看元素的監聽事件：元素的右邊欄的Event Listener頁面，可以查看到該元素的所有監聽事件。在開發中，尤其是維護其他人的代碼時，會出現不了解元素對應的監聽事件，這個時候，可以在這個頁面中找到。這個頁面不僅能看到對應的事件函數，還可以定位該函數所在的JS文件以及在該文件中的具體位置（行數）。
<!doctype html><!--聲明當前文檔類型-->
<html><!--網頁結構的開始-->
<head><!--描述網頁基本信息-->
<meta charset="UTF-8"><!--聲明網頁編碼格式-->
<meta name="Keywords" content="關鍵字，關鍵詞">
<meta name="Description" content="描述和簡介">
<title>測試網站</title><!--網站標題-->
<!--<style>
#baner4{
width:200px;
height:200px;
background:green;
}
.banner3{
width:200px;
height:200px;
background:yellow;
}
</style>-->
<link rel="stylesheet" href="style.css">
</head>
<body><!--可視區域-->
test
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<p>這是一個段落</p>
<!--<div style="width:200px;height:200px;background:red;"></div>-->
<div id="baner4"></div>
<div class="banner3"></div>
<a href="http://www.baidu.com">這是一個超鏈接</a>
<img src="/usr/local/123.jpg" /><!--圖像是單標簽-->
<iframe src="www.baidu.com" width="400" height="400"></iframe><!--內嵌元素-->
<ul><!--無序列表-->
<li>coffee</li>
<li>juice</li>
<li>milk</li>
</ul>
<ol><!--有序列表-->
<li>coffee</li>
<li>juice</li>
<li>milk</li>
</ol>
</body>
</html>
控制台（Console）
- 當網頁的JS代碼中使用了console.log( )函數時，該函數輸出的日志信息會在控制台中顯示。日志信息一般情況下是測試開發工程師在測試調試時啟用，而在正式上線后，一般會將console.log( )函數去掉。
- 在測試界面時，如果出現Bug問題，一般情況下會在這欄展示，查看調試日志信息或者異常錯誤信息，然后前端開發工程師根據具體問題來調試，進行解決問題。
源代碼（Sources）
- 當前打開的網頁界面所涉及到的所有源代碼都會出現在該欄，包括：樣式、css、圖片、js文件等。
網絡（Network）
- Name/Pat：資源名稱以及URL路徑（main.css）
- Method：Http請求方法(GET或者POST)
- status/Text：Http狀態碼/文字解釋（200，ok）
- Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
- Initiator：解釋請求是怎么發起的，有四種可能的值
1.Parser ：請求是由頁面的html解析時發送
2.Redirect：請求是由頁面重定向發送
3.script ：請求是由script腳本處理發送
4.other ：請求是由其他過程發送的，比如頁面里的Link鏈接點擊
- size/content：size是響應頭部和響應體結合的大小，content是請求解碼后的大小
