很多Web前臺開發(fā)者都喜歡這種瀏覽器自帶的開發(fā)者工具，這對前臺設(shè)計、代碼調(diào)試很大幫助的。
Chrome瀏覽器得益于其優(yōu)秀的V8解釋器，javascript執(zhí)行速度和內(nèi)存占有率表現(xiàn)非常優(yōu)秀。對于html+css+javascript前臺技術(shù)的學(xué)習(xí)或者開發(fā)，瀏覽器developer tool的使用時必不可少的，也能極大的提高學(xué)習(xí)或者開發(fā)效率。本文根據(jù)版本 23.0.1271.10。在window下，開啟developer tool的快捷鍵為F12。
1 Developer tool功能結(jié)構(gòu)
Developer tool的功能欄有8個，分別是標簽、資源、網(wǎng)絡(luò)、源碼、時間軸、性能、監(jiān)察和顯示（命令行）。
2 Element panel
2.1 Element控制面板基本功能
Element控制面板能夠讓你查看所有的DOM tree中的內(nèi)容，可以根據(jù)html內(nèi)容找到頁面中的元素或者根據(jù)頁面中的定位標簽，同時可以改變DOM的內(nèi)容。由javascript代碼產(chǎn)生的標簽，也只能通過這種方式查看了（在你的IDE中無法看到）。
Element控制面板
如上圖所示，我選中
標簽之后，在頁面中顯示的對應(yīng)的元素就會選中。如果，我現(xiàn)在要定位百度一下這個按鈕，我可以通過左下角的放大鏡，在頁面中選中百度一下，DOM中也會把對應(yīng)的標簽給你找出來。這個功能在調(diào)試時絕對是利器。最下面顯示的是現(xiàn)在選中標簽在DOM中的層次關(guān)系。
選元素找標簽功能
我們也可以對里面的內(nèi)容進行臨時性修改，如剛才找到的百度一下標簽中的value改成“調(diào)試一下”后馬上在頁面中相應(yīng)顯示。
臨時修改內(nèi)容
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
