以下以?www.ibm.com 為例講解；

打F12，或者在菜單中選擇 工具-開發(fā)人員工具 ，調(diào)出開發(fā)人員工具面板；如下圖；

html元素層次的底部顯示了當(dāng)前的層次；如下圖；首先是html文檔；然后是body，id為ibm-com；然后是div，id為ibm-top，css類為ibm-landing-page；

下面找一下首頁視頻播放區(qū)；在html層次圖中移動(dòng)鼠標(biāo)和選擇不同元素，被選中的元素會(huì)在網(wǎng)頁上對(duì)應(yīng)區(qū)域有一個(gè)類似被陰影遮蓋的效果；

如上圖和下圖，視頻播放區(qū)是css類為ibm-col-6-3.ibm-padding-top-3的div；div大小也在下圖給出；

選中不同的區(qū)域，會(huì)給出對(duì)應(yīng)區(qū)域的布局；下圖可見，類為ibm-columns.ibm-padding-top-3的div，大小為1200*410,上左右下的padding分別為60 10 10 10，和其border和margin；

這個(gè)是視頻播放區(qū)的布局，大小為580*313，和相應(yīng)的padding，border，margin；

選中不同區(qū)域，會(huì)給出不同區(qū)域的style；

下圖是id為ibm-leadspace-body的style；

下圖是css類為ibm-columns.ibm-padding-top-3的style；

這是ibm-col-6-3.ibm-padding-top-3的style；

拖動(dòng)放大屬性區(qū)，看到全部style；

拖動(dòng)放大布局區(qū)可看到各個(gè)樣式的定義；

事件監(jiān)聽面板，可看到不同的事件位于的js；

屬性面板；

詳細(xì)屬性；baseURI，childNodes，children，classList，className，客戶區(qū)高和寬，dataset等；

資源面板，可看到j(luò)s函數(shù)信息；

可看到j(luò)s腳本代碼；

資源面板；

Frames下包含各項(xiàng)資源的單獨(dú)信息，字體，圖片；

腳本文件，樣式表文件；

還有當(dāng)前頁面源碼；

總結(jié)

以上是生活随笔為你收集整理的浏览器开发人员工具使用初步图解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。