You are here: User Guide > Tasks > Working with Plugins > Working with the Ajax DOM Source View

Working with the Ajax DOM Source View

The DOM Source view shows the content and structure, including the attributes and values, of the highlighted node (and its child nodes) in HTML format.

Editing the Source Code of a Node

This procedure describes how to make changes in the source code of a node. This allows you to take the analysis capabilities of Ajax Tools and utilize the information to optimize element performance.

 

 

Instructions on how to complete a procedure

To make changes in the source code of a node:

  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. Select a node from the DOM Inspector hierarchal tree.

  1. Open the DOM Source view.
    The source code of the selected node appears in HTML format.

Ajax DOM Source View

  1. Make the necessary changes in the source code.

  2. Click Update Browser Source with Changes.
    The browser is modified according to your changes.

If you would like to revert back to the original browser source code before clicking Update Browser Source with Changes, click Refresh Source from Browser Page. You will lose any changes made to the source code that were not updated completely according to the instructions above.

Validating a DOM Source

This procedure describes how to validate a DOM source. The DOM source is validated by running an XML validator. This will detect problems such as missing closing tags and unpaired quotes in tag attributes.

 

 

Instructions on how to complete a procedure

To validate DOM source:

  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 Source view.
    The source code of the selected node appears in HTML format.

Ajax DOM Source View

  1. Click .
    The source status appears at the top of the view.
    If there is a validation error, the reason for the error will appear beside it in the "Source Status" field.

If you make a change that leads to a validation error in the DOM Source view, you will not be able to update the browser source with the changes.

DOM Source View Icons

The DOM Source View includes the following icons:

Update Browser Source with Changes

Update the browser source with changes.

Refresh the Source from the Browser Page

Refresh the source code according to the browser page.

Validate the DOM Source

Validate the DOM source.

 

 

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 CSS View

Working with the Ajax JavaScript View

Working with the Ajax DOM Watcher View

Working with the Ajax DOM Compare View

Working with the Internal Web Browser

Debugging JavaScript

Working with jQuery JavaScript Library

Working with Prototype JavaScript Library

Web Browser Tools Perspective

 

 

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