如果你還沒用過Mozilla上的DOM Inspector 試試看!

如同page poking一樣,看您是要觀測網頁,還是做網頁的設計或應用程式的開發,你會發現它有難以估算的價值。

Mozilla使用標準且完整的DOM架構來呈現網頁和使用者介面DOM Inspector讓你檢視、沿巡、甚至即時更動 DOM。



DOM Inspector是一個Mozilla的應用程式可以從瀏覽器工具->網頁開發

(Tools->Web Development)的選單中來使用(按:現在似乎直接在工具裡了)

如果你使用其他以Gecko為基礎的瀏覽器或是為了某些原因在建立的時候並沒有包含DOM Inspector

,那麼你可以從底下安裝說明部分的連結進行安裝


當你第一次使用DOM Inspector時,展現在你眼前的是擁有兩個面版的視窗應用程式,看起來有點像是主要的Mozilla瀏覽器視窗

與瀏覽器一樣,DOM Inspector 有著位址列、類似資料方塊列的左方面版、還有一些相同的選單項 (像是郵件 和 Chatzilla 等共有的

「視窗」和「工具」選單)。








空的DOM Inspector




以下幾節提供了 DOM Inspector 的簡單說明


  • 啟動DOM Inspector

  • 使用 DOM Inspector

  • 愛上Inspector

  • 安裝






  • 啟動DOM Inspector


    要啟動DOM Inspector可以用底下三個方法開啟




















    檔案->觀測視窗


    在 DOM Inspector 視窗裡,打開「檔案」選單 → 「Inspect a Window」,在子選單你會看到所有已載入的 DOM 視窗,大概會列有 DOM Inspector 它自己還有至少一個瀏覽器視窗。DOM Inspector會追蹤所有已經開啟的視窗 (也就是它所知道的所有的 DOM),所以如果想要查看某個視窗,先把它打開,再回到 DOM Inspector 檢視它即可。舉例來說,想要開始檢視主郵件程式的 DOM,那麼我們只要打開郵件程式,然後回到 DOM Inspector 之後選擇「檔案」選單 → 「Inspect a Window」→ 「Inbox for帳號@網域.com



    檔案->觀測URL

    另一種觀測DOM的方式就是透過網頁上的 URL

    選擇第二個選單項目並鍵入URL將目的地網頁載入DOM Inspector

    跟window DOM比較起來window DOM顯示應用程式本身

    而網頁的"document"DOM則是顯示從網頁頂部的標籤開始的DOM模型

    舉個例子來說 你可以在對話視窗鍵入www.brownhen.com並且看到brownhen首頁的DOM模型



    DOM of a Web Page


    Ctrl + Shift + I 最後你可以按下Ctrl+Shift+I的快速鍵啟動DOM Inspector來觀測目前已載入的網頁

    舉個例子來說,如果你現在使用Mozilla在www.cnn.com網站閱讀新聞

    並且按下上述的快速鍵,DOM Inspector將會載入這個頁面的DOM模型

    並且在Inspector應用程式的視窗中顯示這則頁面的DOM結構


    當DOM Inspector載入DOM時,左邊的面版會顯示當前DOM的階層結構而右邊的面版則會顯示目前所選擇元素的相關資訊

    ,包括屬性名稱、屬性的值和其他資料


    此外,當你在觀測某個網頁的DOM時網頁的內容將會顯示在DOM Inspector底下的視窗

    這可以幫助你不需要使用另外的瀏覽器來觀看這個網頁的內容並且這可以讓你所選取的DOM節點突顯示在底下的頁面視窗






    DOM Loaded in DI

    使用 DOM Inspector


    如果你對某一個頁面的DOM或是chrome感到興趣,那麼你可以在DOM Inspector中使用左方面版的樹狀結構檢視方式

    觀察你有興趣的DOM物件

    對你的網頁或是應用程式開發來說,其中一個最大也最立即的好處就是它可以讓你找到使用者介面中你有興趣的部分


    DOM Inspector最常見的一個使用方式就是在使用者介面上用來尋找特定圖示的名稱和位址

    一般來說,如果使用其他的方法那麼這將不是件容易的工作

    當你在DOM Inspector中選擇了DOM的某個部分,使用者介面上的那個元件將會被突顯出來





    舉例來說,如果你想要觀測主要的瀏覽器視窗並且在右邊的面版選擇了許多節點

    (像是已經被載入navigator.xul中但卻不可見的script裡似乎永無止境的元件列表中的某些節點)

    ,那麼你將會看到瀏覽器介面使用高亮度的紅色框框顯現其中許多部分

    你可以藉著這個功能從大的架構深入至小的架構當中(像是狀態列的元件,他就在DOM物件的最高階層)

    像是在瀏覽器左方提供讓使用者呼叫電子郵件存取程式的"小郵件"圖示





    DOM Inspector 資訊型態


    當你選擇了一個節點,像是"小郵件"的節點你可以在DOM Inspector應用程式的視窗中選擇要顯示哪一種類型的節點資訊

    所有的類別都可以從右邊面版左方的彈出式視窗來選擇





    為了找出小郵件圖示的正確檔案名稱,你可以從選單中選擇CSS Style Rules 並且看到這個選項的選項和規則。

    這個規則允許小郵件圖示以ID為基礎跟郵件功能進行鍊結(郵件圖示在工具列上是唯一的)

    並且使用 list-style-image這個屬性指到布景主題JAR檔中的檔案

    這個檔案的實際位址將會是 chrome://communicator/skin/taskbar/mail.gif


    這個彈出式視窗所列出來的型態可以讓你對於DOM Inspector觀測能力的強大稍微有點概念

    底下的這個表格提供了這些資訊的簡單說明
































    DOM Node 預設的瀏覽模式DOM Node展現所給定的頁面或是chrome的DOM架構
    Box Model Box Model是Mozilla應用程式介面的佈局系統box元素使用具有高度延展性、靈活度和巢狀結構

    這使得他可以在XUL文件中達到類似表格的佈局方式

    這個瀏覽模式將會展現boxes這些元素和他的佈局屬性是如何在介面上定位元件



    XBL Bindings XBL是一個可以讓你在XUL和HTML上建立延伸套件的語言這個瀏覽模式可以讓你看到XBL在文件上

    的鍊結方式
    CSS Style Rules 這個瀏覽模式展現適用於使用者指定節點的所有CSS格式
    Computed Style 這個瀏覽模式可以顯示元件所有的風格規則 (style rules)

    ,不管它是從詳盡的宣告、從script或是繼承而來

    Computed Style瀏覽模式提供你一個元件的風格規則清單

    你可以依照你的意願來觀測或是編輯
    javascript Object 這個檢視模式讓你可以檢視操作所有的javascript物件

    最常用來當作範例的javascript物件就是target物件

    target通常用來指定和取得介面產生的事件資訊


    選擇使用者介面上的元素


    DOM Inspector的另一個強大的互動功能就是它可以顯示任何所載入的DOM物件子樹

    換句話說,當你使用DOM Inspector時如果在搜尋->使用點選方式選擇元件(Search ->Select Element by Click)中開啟了這個功能

    或是在DOM Inspector應用程式的左上方面版按下小放大鏡的圖示

    那麼你就可以在已讀取的網頁或是Mozilla應用程式介面任何你感興趣的地方按下左鍵

    ,而被按下的元件將會被送到DOM Inspector的左方面板,而它的資訊則會顯示在右方


    找尋DOM中的節點


    另一種檢視DOM的方法就是藉著ID、class、或是屬性(attribute)搜尋你有興趣的特定元素

    當你按下 Search->Fine Nodes或是按下Ctrl+F的快速鍵時DOM Inspector 會顯示搜尋視窗來讓你以數種方式找尋特定元素

    你也可以按下來啟動這個搜尋的對話視窗





    動態更新DOM


    在這篇簡介中最後被提到的功能就是DOM Inspector給予使用者可以動態反映出網頁、使用者介面或是其他元素DOM資訊的變更


    特別要注意的是當DOM Inspector顯示特定的節點或是子樹時,他會把當前的節點和節點的值

    (在DOM中屬性(attribute)是元素(elements)的子節點(subnodes))

    顯示在一個動態地、排序過的列表你可以在列表中的這些個別元素上按下右鍵,在稍後出現的選單內容中編輯這些屬性的值。





    舉例來說,table這個元素經常用來在網頁上佈局元件,但是如果有某部分出錯那麼將會很難找有出問題的部分。

    尤其是table的巢狀結構相當複雜的時候

    就像是你常常遇到的複雜網頁,你可以使用DOM Inspector動態的編輯能力將表格獨立出來。

    (舉例來說,像是更改他們的背景顏色、增加邊框或是其他類似的東西)

    這個功能允許你增減元素的大小、更改圖示、或是其他的佈局修正、更動並且這些並不需要實際地更動磁碟裡的DOM檔案



    愛上Inspector


    DOM Inspector需要一點時間來理解

    不過一旦你習慣使用它,那麼你將會發現,它在應用程式和網頁的瀏覽結構正好是你開發過程中所期盼的輔助工具

    DOM Inspector不僅僅只是將網頁的資訊以清楚而有架構的呈現,他還讓你有辦法可以更改這些架構。

    並且在Mozilla 瀏覽器中你可以很簡單地透過快速鍵或是選單來存取它。




    如同Mozilla 的協同工具 Venkman- 一個javascript的除錯器

    DOM Inspector對於任何的網頁或是使用DOM為基礎的應用程式介面都可以給你完整的瀏覽模式

    在我自己的網頁開發過程中,他已經是一個相當普通的工具。即使是在網頁的瀏覽上他也相當有用

    當我瀏覽到某個頁面看起來像是有許多有趣的東西那麼我會按下Ctrl+Shift+I來看看這些的DOM長什麼樣子

    、這頁的作者使用了什麼樣子的CSS架構來呈現或是某些隱藏在這個文件的訊息


    安裝 DOM Inspector


    使用底下的連結將DOM Inspector安裝在你的瀏覽器上




    狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()