Open topic with navigation

Working with JavaScript Debugging

Zend Studio's JavaScript Debugging plugin includes Ajax Tools.

Ajax Tools is a set of features based on the Web browser incorporated into Zend Studio. This provides the advantage of having a fully functioning web browser in your environment as well as the ability to edit, debug, and monitor your projects live, thus improving and simplifying the process for you.

The additional functionality provided by Ajax Tools can be applied to HTML, CSS, JavaScript, and XML.  

Prerequisites

• Installed JavaScript Debugging plugin

How do I install plugins in Zend Studio?

To use Ajax Tools functionalities go to the Web Browser Tools Perspective which can be manually accessed by going to Window | Open Perspective | Other | Web Browser Tools Perspective.

Ajax Tools Views

Ajax Tools provides the following Views:

• DOM Inspector View - The DOM Inspector view provides a pre-defined hierarchal tree of HEAD and BODY elements. The attributes and values of the selected node appear in the view as well.

• Browser Console View - The Browser Console view is an aggregative list of the execution errors, warnings, and information messages that occurred in the time the page open in the Internal Web Browser was running.

• Request Monitor View - The Request Monitor view allows you to analyze the requests that occur in the browser open in the Internal Web Browser. The request is separated into different components (request, waiting, and response), and allows you to see the exact time each component is active, in seconds. This view should be used when profiling your application.

• 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.

• CSS View - CSS style rules determine the formatting of an element. The CSS view provides four different tabs, each with a different approach to the CSS style rules in the browser, both active and inactive.

• JavaScript View - The JavaScript view allows you to evaluate JavaScript expressions. This is useful to test, check, and debug your JavaScript code.

• DOM Watcher View - The DOM Watcher view is a way to record events occurring in the node selected in the DOM Inspector view. This allows you to see what exact events are occurring live.

• 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.

Ajax Tools Procedures

The following topics describe how to work with Ajax Tools:

• Debugging JavaScript

• 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 Ajax DOM Compare View

• Working with the Internal Web Browser

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