3.2　Elements標簽

在Elements標簽中允許從瀏覽器的角度看頁面，也就是說可以看到Chrome渲染頁面所需要的HTML、CSS和DOM（Document Object Model）對象。此外，還可以編輯內(nèi)容更改頁面顯示效果，如圖3-3所示。

圖3-3　Elements標簽

圖3-3中，Elements標簽最左邊的按鈕用于快速查找網(wǎng)頁元素，單擊該按鈕后，在網(wǎng)頁上某一處單擊，就會自動顯示并選中該元素在HTML里的位置。

Elements標簽分成兩部分，分別在圖3-3中標為區(qū)域1和區(qū)域2，兩個區(qū)域相輔相成。區(qū)域1顯示整個網(wǎng)頁的HTML信息，單擊選中某一行內(nèi)容的時候，區(qū)域2的Styles標簽會顯示當(dāng)前單擊選中內(nèi)容的CSS樣式，并可對元素的CSS進行查看與編輯修改。Computed顯示當(dāng)前選中的邊距屬性、邊框?qū)傩裕脠D像顯示一個整體效果。Event Listeners是整個網(wǎng)頁事件觸發(fā)的JavaScript，如圖3-4所示。

圖3-4　Event Listeners

通過單擊Event Listeners下的某個JavaScript會自動跳轉(zhuǎn)到Sources標簽，顯示當(dāng)前JavaScript的源碼，這個功能可快速找到JavaScript代碼所在的位置，對分析JavaScript起到快速定位作用。