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

打F12，或者在菜單中選擇 工具-開發人員工具 ，調出開發人員工具面板；如下圖；

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

下面找一下首頁視頻播放區；在html層次圖中移動鼠標和選擇不同元素，被選中的元素會在網頁上對應區域有一個類似被陰影遮蓋的效果；

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

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

這個是視頻播放區的布局，大小為580*313，和相應的padding，border，margin；

選中不同區域，會給出不同區域的style；

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

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

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

拖動放大屬性區，看到全部style；

拖動放大布局區可看到各個樣式的定義；

事件監聽面板，可看到不同的事件位于的js；

屬性面板；

詳細屬性；baseURI，childNodes，children，classList，className，客戶區高和寬，dataset等；

資源面板，可看到js函數信息；

可看到js腳本代碼；

資源面板；

Frames下包含各項資源的單獨信息，字體，圖片；

腳本文件，樣式表文件；

還有當前頁面源碼；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。