User Guide > Tasks > Working with Plugins > Working with the Ajax DOM Compare View

Working with the Ajax DOM Compare View

The DOM Compare view compares DOM attributes, child nodes, and CSS properties of a node.

This view will not appear automatically when selecting the Web Browser Tools Perspective. To open it go to Window | View | DOM Compare.

Comparing Nodes

This procedure describes how to compare nodes. This is allows you to visually see the differences between nodes. This feature compares DOM attributes, child nodes, and CSS properties of a node.

 

 

Instructions on how to complete a procedure

To compare nodes:

  1. Go to Window | Open Perspective | Web Browser Tools.

  2. Click Open a URL in the Mozilla Browser from the main toolbar.
    The “Open URL…” dialog opens.

  3. Enter a URL in the “Enter URL…” text field and press Enter.
    The URL opens in the Internal Web Browser.  

  4. Open the DOM Compare view.

  5. Select a node from the DOM Inspector view and drag it into the “Compare List:” field.
    Repeat step 3 for as many nodes as you want to compare.

  6. Highlight the nodes to compare in the “Compare List:” field.

  7. In the “Compare:” field choose from the following:

  • DOM Attributes – To compare the DOM attributes of the selected nodes.

  • Child Nodes – To compare the child nodes of the selected nodes.

  • CSS – To compare the CSS properties of the selected nodes.

  1. Press Compare.
    The details will appear in the view organized by columns. Each column is for a different node.

CSS View DOM Compare of DOM Attributes

To clear nodes from the “Compare List:” field, click the Remove Node Icon to remove only one node or Clear to remove the entire list.

 

 

Related Links:
Ajax Tools

Working with the Ajax DOM Inspector View

Working with the Ajax Browser Console View

Working with the Ajax Request Monitor View

Working with the Ajax DOM Source View

Working with The Ajax CSS View

Working with the Ajax JavaScript View

Working with the Ajax DOM Watcher View

Working with the Internal Web Browser

Debugging JavaScript

Working with jQuery JavaScript Library

Working with Prototype JavaScript Library

Web Browser Tools Perspective

 

 

©1999-2013 Zend Technologies LTD. All rights reserved.