不同瀏覽器F12控制面板的中英文顯示
360瀏覽器:英文
IE瀏覽器:中文
搜狗:英文
谷歌瀏覽器:英文
火狐瀏覽器：安裝firebug英文;沒有按照就默認(rèn)中文
F12控制臺(tái)功能
元素（Elements）:用于查看或修改HTML元素的屬性、CSS屬性、監(jiān)聽事件、斷點(diǎn)等。
可以直接點(diǎn)擊元素進(jìn)行CSS、html修改；此修改只會(huì)在本地生效；不會(huì)上傳到服務(wù)器端，所以可以用來(lái)調(diào)試前端代碼
控制臺(tái)（Console）：記錄前端javascript對(duì)象、log信息、異常信息
源代碼（Sources）:查看網(wǎng)頁(yè)的源代碼HTML代碼，js代碼、CSS代碼，可以直接修改代碼進(jìn)行前端調(diào)試
可以點(diǎn)擊JS代碼前面的數(shù)字來(lái)設(shè)置斷點(diǎn) ；斷點(diǎn)可以在DOM元素節(jié)點(diǎn)發(fā)生改變時(shí)、XHR生命周期狀態(tài)改變時(shí)、指定的事件執(zhí)行時(shí)被觸發(fā)
網(wǎng)絡(luò)（Network）:與網(wǎng)絡(luò)相關(guān)的接口請(qǐng)求響應(yīng)和網(wǎng)絡(luò)傳輸?shù)?/strong>
記錄頁(yè)面上的網(wǎng)絡(luò)請(qǐng)求的詳情信息，從發(fā)起頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間、Request和Response等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
requests Table：
在Timing標(biāo)簽中可以顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分時(shí)間花費(fèi)信息，可能會(huì)涉及到如下過(guò)程的時(shí)間花費(fèi)情況：
1、Queuing
排隊(duì)的時(shí)間花費(fèi)，可能由于該請(qǐng)求被渲染引擎認(rèn)為是優(yōu)先級(jí)比較低的資源（圖片）、服務(wù)器不可用、超過(guò)瀏覽器的并發(fā)請(qǐng)求的最大連接數(shù)（Chrome的最大并發(fā)連接數(shù)為6）.
2、Stalled（阻塞）
瀏覽器對(duì)同一個(gè)主機(jī)域名的并發(fā)連接數(shù)有限制，因此如果當(dāng)前的連接數(shù)已經(jīng)超過(guò)上限，那么其余請(qǐng)求就會(huì)被阻塞，等待新的可用連接；此外腳本也會(huì)阻塞其他組件的下載；
優(yōu)化措施：
1、將資源合理分布到多臺(tái)主機(jī)上，可以提高并發(fā)數(shù)，但是增加并行下載數(shù)量也會(huì)增大開銷，這取決于帶寬和CPU速度，過(guò)多的并行下載會(huì)降低性能；
2、腳本置于頁(yè)面底部；
3、Proxy Negotiation
與代理服務(wù)器連接的時(shí)間花費(fèi)。
4、DNS Lookup
執(zhí)行DNS查詢的時(shí)間。網(wǎng)頁(yè)上每一個(gè)新的域名都要經(jīng)過(guò)一個(gè)DNS查詢。第二次訪問(wèn)瀏覽器有緩存的話，則這個(gè)時(shí)間為0。請(qǐng)求某域名下的資源，瀏覽器需要先通過(guò)DNS解析器得到該域名服務(wù)器的IP地址。在DNS查找完成之前，瀏覽器不能從主機(jī)名那里下載到任何東西。
優(yōu)化措施：
1、利用DNS緩存（設(shè)置TTL時(shí)間）；
2、利用Connection:keep-alive特性建立持久連接，可以在當(dāng)前連接上進(jìn)行多個(gè)請(qǐng)求，無(wú)需再進(jìn)行域名解析；
5、Initial Connection：
建立連接的時(shí)間花費(fèi)，包含了TCP握手及重試時(shí)間。
6、SSL
http是超文本傳輸協(xié)議，以明文方式發(fā)送內(nèi)容，不提供任何方式的數(shù)據(jù)加密，如果被不法分子截取瀏覽器和服務(wù)器之間的傳輸報(bào)文，會(huì)獲取其中的信息。
https 是安全套接字層超文本傳輸協(xié)議，就是在HTTP的基礎(chǔ)上加入了SSL協(xié)議，SSL依靠證書來(lái)驗(yàn)證服務(wù)器的身份，并為瀏覽器和服務(wù)器之間的通信加密。
因此建立HTTPS連接的時(shí)間相當(dāng)于三次握手的時(shí)間+SSL時(shí)間。
7、Request sent （發(fā)送請(qǐng)求）
發(fā)送HTTP請(qǐng)求的時(shí)間（從第一個(gè)bit到最后一個(gè)bit）
優(yōu)化措施：
1、減少HTTP請(qǐng)求，可以使用CSS Sprites、內(nèi)聯(lián)圖片、合并腳本和樣式表等；
2、對(duì)不常變化的組件添加長(zhǎng)久的Expires頭（相當(dāng)于設(shè)置久遠(yuǎn)的過(guò)期時(shí)間），在后續(xù)的頁(yè)面瀏覽中可以避免不必要的HTTP請(qǐng)求；
8、Waiting (等待響應(yīng))
是最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到第一個(gè)字節(jié)這段時(shí)間，它包含了TCP連接時(shí)間，發(fā)送HTTP請(qǐng)求時(shí)間和獲得響應(yīng)消息第一個(gè)字節(jié)的時(shí)間。
通常是耗費(fèi)時(shí)間最長(zhǎng)的。從發(fā)送請(qǐng)求到收到響應(yīng)之間的空隙，會(huì)受到線路、服務(wù)器距離等因素的影響。
優(yōu)化措施：
1、使用CDN，將用戶的訪問(wèn)指向距離最近的工作正常的緩存服務(wù)器上，由緩存服務(wù)器直接響應(yīng)用戶請(qǐng)求，提高響應(yīng)速度；
9、Content Download （下載）
獲取Response響應(yīng)數(shù)據(jù)的時(shí)間花費(fèi)。
下載HTTP響應(yīng)的時(shí)間（包含頭部和響應(yīng)體）
優(yōu)化措施：
1、通過(guò)條件Get請(qǐng)求，對(duì)比If-Modified-Since和Last-Modified時(shí)間，確定是否使用緩存中的組件，服務(wù)器會(huì)返回“304 Not Modified”狀態(tài)碼，減小響應(yīng)的大小；
2、移除重復(fù)腳本，精簡(jiǎn)和壓縮代碼，如借助自動(dòng)化構(gòu)建工具grunt、gulp等；
3、壓縮響應(yīng)內(nèi)容，服務(wù)器端啟用gzip壓縮，可以減少下載時(shí)間；
性能（Performance）:監(jiān)控該網(wǎng)頁(yè)的性能各種指標(biāo)信息?
內(nèi)存（Memory）:記錄頁(yè)面跟隨時(shí)間的內(nèi)存使用情況
存儲(chǔ)（Application）:查看一些本地存儲(chǔ)、會(huì)話存儲(chǔ)、已索引數(shù)據(jù)庫(kù)、Cookie、緩存、幀等
安全（Security）:調(diào)試當(dāng)前網(wǎng)頁(yè)的安全和認(rèn)證等問(wèn)題
如果網(wǎng)頁(yè)是安全的，則會(huì)顯示這樣一條消息：This page is secure (valid HTTPS).。
通過(guò)點(diǎn)擊View certificate可以查看main origin的服務(wù)器證書信息。
點(diǎn)擊左側(cè)可以查看指定源的連接和證書詳情。
如果網(wǎng)頁(yè)是不安全的，則會(huì)顯示：This page is not secure.。
該面板可以區(qū)分兩種類型的不安全的頁(yè)面：
- 如果被請(qǐng)求的頁(yè)面通過(guò)HTTP提供服務(wù)，那么這個(gè)主源就會(huì)被標(biāo)記為不安全。
- 如果被請(qǐng)求的頁(yè)面是通過(guò)HTTPS獲取的，但這個(gè)頁(yè)面接著通過(guò)HTTP繼續(xù)從其他來(lái)源檢索內(nèi)容，那么這個(gè)頁(yè)面仍然被標(biāo)記為不安全。這就是所謂的混合內(nèi)容頁(yè)面,混合內(nèi)容頁(yè)面只是部分受到保護(hù),因?yàn)镠TTP內(nèi)容(非加密的內(nèi)容)可以被嗅探者入侵,容易受到中間人攻擊。
