Chrome開發工具Elements面板(編輯DOM和CSS樣式)詳解


Element 譯為“元素”,Element 面板可以讓我們動態查看和編輯DOM節點和CSS樣式表,並且立即生效,避免了頻繁切換瀏覽器和編輯器的麻煩。

我們可以使用Element面板來查看源代碼,它不但可以很好的格式化DOM節點,清晰的展現HTML文檔,還可以查看JavaScript創建的DOM節點和iframe中的DOM節點,比在當前網頁中右擊鼠標選擇“查看網頁源代碼”強大很多。

總之,Element面板可以讓我們很透徹的了解DOM和CSS的底層結構。

我們將以下面的HTML代碼為例來詳細了解Element面板:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  5. <style type="text/css">
  6. h1{
  7. color: blue;
  8. }
  9. p{
  10. padding: 10px;
  11. border: 1px solid #ccc;
  12. }
  13. </style>
  14. <title>Chrome開發者工具演示</title>
  15. </head>
  16. <body>
  17. <div>
  18. <h1>JavaScript中文網</h1>
  19. <p>http://www.itxueyuan.org/javascript/</p>
  20. </div>
  21. </body>
  22. </html>

復制該代碼,保存為demo.html並在Chrome瀏覽器中打開,按 Ctrl+Shift+C(Mac系統為Cmd+Shift+C)打開開發者工具並進入元素審查模式。

查看DOM樹

打開Element面板,可以查看所有DOM節點,包括CSS和JavaScript,如下圖所示,左側為DOM樹,右側為CSS樣式。


圖 2.1  Element面板示例


圖標說明:

  • 點擊“圖標1”,可以在新窗口中打開開發者工具,再次點擊回到當前網頁;
  • 點擊“圖標2”,可以調出控制台,可以在控制台里輸入並執行JavaScript代碼,查看當前網頁的錯誤和日志等;
  • 點擊“圖標3”,可以選取當前頁面的HTML元素。

選取DOM節點

點擊“圖標3”(由黑色變為藍色),將鼠標移到網頁中的某元素上面,該元素會發生變化如下圖所示:


圖 2.2  鼠標移動到網頁中的元素


點擊該元素,即可選中。這時,會發現Element面板中的DOM樹發生了變化,如下圖所示:


圖 2.3  DOM樹發生變化


選中的<p>節點在DOM樹中被精確定位(藍色背景),可以看到<p>節點的DOM層次(紅色方框),在面板右側,是<p>節點的CSS樣式。

當然,也可以在Element面板的DOM樹中選取DOM節點。將鼠標放到相應的DOM節點上,會發現網頁中相應的節點也發生了變化(同圖2.2),點擊該節點,即可選中。

增加、刪除和修改DOM節點

在Element面板中,選擇DOM節點,在文本處右擊鼠標,會彈出一個菜單,如下圖所示:


圖 2.4  DOM編輯菜單


菜單說明:

  • Edit text(編輯文本):編輯該節點中的文本。也可以在文本處雙擊進行編輯。
  • Edit as HTML(編輯HTML):編輯該節點及其子節點的所有HTML元素(包括節點中的文本)。
  • Copy as HTML(復制HTML):復制該節點及其子節點的所有HTML元素(HTML文檔)。
  • Copy XPath(復制XPath路徑):復制該節點的XPath路徑,即DOM層次路徑。例如,<p>節點的XPath路徑為 /html/body/div/p 。
  • Delete node(刪除節點):刪除該節點及其子節點的所有HTML元素。也可以使用 Backspace 和 Delete 鍵刪除。
  • Inspect DOM properties(審查DOM屬性):在控制台中顯示該節點的所有標准屬性(如果有的話)。
  • Word wrap(自動換行):HTML代碼是否自動換行。


對 Inspect DOM properties(審查DOM屬性)的說明:
為<p>節點添加id屬性,如下:

  1. <p id="demo">http://www.itxueyuan.org/javascript/</p>

會在控制台輸出p#demo;再向<p>節點添加class屬性和name屬性,如下:

  1. <p id="demo" class="demo" data="demo">http://www.itxueyuan.org/javascript/</p>

會在控制台輸出p#demo.demo。

可見,控制台只會輸出符合W3C標准的屬性,不支持自定義屬性。不過,實際開發中很少用到該功能。

另外,我們也可以通過拖動節點來改變節點的順序,雙擊屬性節點來改變它的值。

查看CSS樣式

CSS樣式審查面板是一個非常有用的面板,實際開發中,有時候CSS樣式表會非常復雜,甚至連我們自己都不知道當前節點應用了哪些樣式。使用CSS樣式審查面板,可以讓我們清楚地知道當前節點使用了哪些樣式,分別來自哪些文件,哪些樣式是被覆蓋的,哪些樣式是最終樣式,哪些樣式是無效的,等等。

如圖2.3所示,選中節點,Element面板右側的CSS樣式審查面板會展示出該節點的CSS樣式。

在CSS樣式審查面板中,我們可以添加、刪除和修改CSS樣式。

另外,CSS審查面板中有幾個子面板,如下圖所示:


圖 2.5  CSS樣式審查面板的子面板


子面板說明:

  • Style(樣式):當前節點的樣式;
  • Computed(計算):查看當前節點經過計算后的樣式以及盒模型數據;
  • Event Listeners(事件監聽):查看為當前節點綁定的事件和事件監聽函數;
  • DOM Breakpoints(DOM斷點):查看為當前節點設置的DOM斷點;
  • Properties(屬性):當前節點(對象)的所有屬性。


【小技巧】使用鍵盤方向鍵改變數值
查看<p>節點的樣式,如【圖2.3】所示,選中 padding 的值,按下鍵盤方向鍵(<- 和 ->)數值會跟着改變,頁面上<p>節點的樣式也立刻改變。實際開發中,會經常使用該方法來微調元素的外邊距、內補白和大小等,非常方便。

【小技巧】顏色拾取器
查看<p>節點的樣式,如【圖2.3】所示,選中 background-color 后邊的小圖標,會彈出顏色拾取器,能夠很方便的改變背景顏色,如下圖所示:


圖 2.6  顏色拾取器


實際開發中,會經常使用該方法來微調節點的顏色。

REFERENCE FROM : http://www.itxueyuan.org/view/6708.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM