DojoFirebugExtension Reference Guide

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
m (Tested platforms, Installation and other info)
m (Tested platforms, Installation and other info)
 
(One intermediate revision not shown)
Line 2: Line 2:
==Intro==
==Intro==
 +
 +
NOTE: The current version of the extension does not work with dojo 1.8+ and FF17+ . Please disable the extension, until we upload an update.
 +
Are you a dojo app developer? How many times did you find that having the chance to debug the HTML, DOM and also the javascript of your page was *great*, but at the same time you wanted to have a faster access to dojo specifics? Exactly...That was one of the motivations behind this Dojo Firebug extension.
Are you a dojo app developer? How many times did you find that having the chance to debug the HTML, DOM and also the javascript of your page was *great*, but at the same time you wanted to have a faster access to dojo specifics? Exactly...That was one of the motivations behind this Dojo Firebug extension.
Line 30: Line 33:
==Tested platforms, Installation and other info==
==Tested platforms, Installation and other info==
 +
 +
NOTE: The current version of the extension does not work with dojo 1.8+ and FF17+ . Please disable the extension, until we upload an update.
* '''Download from:'''
* '''Download from:'''

Latest revision as of 18:46, 13 April 2013

Ddt-logo.PNG

Contents

[edit] Intro

NOTE: The current version of the extension does not work with dojo 1.8+ and FF17+ . Please disable the extension, until we upload an update.

Are you a dojo app developer? How many times did you find that having the chance to debug the HTML, DOM and also the javascript of your page was *great*, but at the same time you wanted to have a faster access to dojo specifics? Exactly...That was one of the motivations behind this Dojo Firebug extension.

The idea of this extension is to provide easy access to some dojo concepts. Coding and debugging time can be reduced by having features to monitor dijits, access higher-level dojo concepts and specific dojo properties (instead of just DOM properties), see the available connections and subscriptions and be able to set breakpoints on those.


With this extension you can:

  • View all the widgets registered in the dijit registry (as a Tree or as a plain list)
    • View their properties. For each widget you can also switch the view between "dojo specific properties" and "classic DOM properties". For example, whether the widget's startup() method was already invoked or not.
    • Highlight dojo widgets in the web page (when you mouse-over them).
    • View detached widgets (widgets not yet attached to page).
  • View information about the dojo version, dojo-config object, url modules of the loaded page, and the total number of widgets, connections and subscriptions (these numbers are automatically refreshed in the extension UI...useful to detect leaks).
  • View all available connections and subscriptions (global to the app), and also connections and subscriptions associated to a "selected" object. You can filter the connections table to find some specific ones to debug.
  • Set breakpoints to connections: in the connections's event, in the target method, and in the line where the connection was created (i.e. dojo.connect)
  • Set breakpoints to subscriptions: in the target method and where the subscription was created.
  • Open documentation associated to a dojo object.

The extension is integrated with the Firebug inspector. You can right-click on a dijit element in the web page and it will be selected/inspected in the extension panels. You can also click the Firebug's inspect button from inside the extension panel and inspect only the dojo elements from your page.

Also, several new visual representations were added to Firebug to better identify dojo objects in Firebug panels.

The Dojo Firebug Extension started as an internal IBM initiative to help IBMers working with Dojo.

[edit] Download

The Dojo Firebug Extension is available from in the dojofirebugextension folder at getfirebug.com. Pick version number folder to match your version of Firebug.

[edit] Tested platforms, Installation and other info

NOTE: The current version of the extension does not work with dojo 1.8+ and FF17+ . Please disable the extension, until we upload an update.

  • Compatibility table:
    • Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from 1.8 folder
    • Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from 1.8 folder
    • Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from 1.8 folder
    • Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from 1.8 folder
    • Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from 1.8 folder
    • Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from 1.8 folder
    • Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder
    • Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder
    • Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder

Notes/Configuration:

  • You need to enable Firebug's Console and Script panels if you want this extension to work properly.
  • This extension works better with "src" versions of Dojo . Also in dojo.config you need to have "dojo-publish-privates: 1 , in the dojo's has.cache"(anyway, it's currently the dojo default value).


  • This extension WILL NOT WORK with Firebug 1.5.x



  • Latest version from 1.7 download folder was tested with Firefox 4.0 and 4.0.1 , and Firefox 5 in Windows with Firebug 1.7.x.


[edit] Main Panel

Ddt-presentation.PNG

In this panel you can access:

  • All Widgets : displays all available widgets in dijit registry. You can see the widgets as a Tree or as a plain list, by changing a setting in the main menu of the extension panel.
  • All Connections: displays all registered connections as a Table.
  • All Subscriptions: displays existent subscriptions (as a Tree).


There are also some useful side panels at the right:

  • Info side panel
  • Connections and Subscriptions for a "selected" object
  • DOM and HTML panels to show lower level info of the "selected" object

[edit] Widgets

The widgets view displays the available widgets in dijit registry. By default they are displayed in a Tree according to how they are placed in the web page. If you move the mouse pointer over the widgets, you will see them highlighted in the page.


In the following 2 screnshots you will see a widget selected (in the extension panel) and the same widget highlighted in the web page.

Widget selected in panel


Widget highlighted in web page

[edit] Widgets as list

There is also an option to display the widgets as a list (instead of tree). You can switch it in the extension's main menu.

Widgets list

[edit] Diplaying properties

Widgets can display highlevel info related to dojo, or you can just see all their DOM properties (you can change this behavior using the toggle button at the right of each widget)

Dojo properties of a widget

[edit] Other widget options

This is how detached widgets look like in the panel:

Detached widget

Documentation links available for widgets:

Context menu for widgets

[edit] Connections panel

This extension collects information about connections made by dojo.connect and widget.connect methods. They are displayed in a table with the following columns: Object, Event, Context, and Method (trying to follow the names of the arguments of the dojo.connect method).

Ddt-all-connections-main-panel.PNG

[edit] Filtering connections

You can enter a filtering criteria to display connections .


Important: using a "count" filter with a small value will improve performance of the connections panel (e.g. Begin = 0, End = 50 , or Begin = -50, End = 0 if you want the last 50 connections created).


When writing a filter, you can use 3 fields: "Begin" , "End" , and "Filter" . Begin and End fields follow the rules from Array's slice method (https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/slice).

1. Begin: starting index (0 based) . You can use negative indexes too.

2. End : zero-based index at which to end filtering connections (not including "end"). You can use negative indexes too.

3. Filter: a filtering query . It currrently accepts 2 syntaxes:

3.1. You can write a simple string (you can also enter perl regex as well as use a simpler form with * and ? wildcards) , that will be compared (regexp match) against connection's event and method attributes. For example:

 dojo*

3.2. You can also write a filtering query following the rules from dojo.data.ItemFileReadStore , i.e. a query object (JSON notation) to filter by several fields at once. Some examples:

  { event: '*dojo*' }
  { object: '*button*' , method: 'onClick' }


Ddt-filter-connections-1.PNG

Picture 1: simpler syntax


Ddt-filter-connections-2.PNG

Picture 2: query object . For this specific example the query was:

  { context: '*menu*', method:'from*'}

[edit] Subscriptions panel

This view displays information about topics and subscriptions. Each flag represent a topic with its name in red. Each children represent the interested object and the method that will be executed.

Ddt-all-subscriptions-main-panel.PNG


[edit] Side panels

[edit] Info

Display information about dojo loaded in the web page

Ddt-info-side-panel.PNG

[edit] Connections

Ddt-connections-side-panel.PNG

[edit] Subscriptions

Ddt-subscriptions-side-panel.PNG

[edit] Widget Properties

Ddt-widgetprops-side-panel.PNG

[edit] Integration of Firebug inspector and the dojo extension - Inspect in Dojo Panel

You can inspect any dijit by right-clicking in web page and choosing Inpect in Dojo panel Ddt-inspect-in-dojo-panel.PNG


Also, you can use the Firebug Inspector tool (the arrow icon at the left) and choose any dijit in the web page. When you use this option, dijits in web page will display a green border when mouseover.

Ddt-inspect-1.PNG


[edit] Breakpoints

The extension allows you to add breakpoints to connections and subscriptions. You can:

  • Break on Target execution
  • Break on Event execution
  • Break on connect place (or subscribe place) . The place where the dojo.connect was executed to create the connection (IMPORTANT:see performance note below).

Performance note: app loading time will be increased 4X when "Breakpoint on connect/subscribe place" is enabled.

The following pictures show the idea:

Picture 1 and 2: context menu for connections and those items checked Ddt-breakpoints-1.PNG Ddt-breakpoints-2.PNG

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel) Ddt-breakpoints-3.PNG

Pictures 4 and 5: source code with breakpoints Ddt-breakpoints-4.PNG Ddt-breakpoints-5.PNG


[edit] Support for aliases when using multiple dojo versions on page

For more info: http://dojotoolkit.org/reference-guide/1.7/quickstart/multiversion.html

Starting from Dojo Firebug Extension v1.1.4.1 there is a new preference to support this. To use it, you need to type "about:config" in Firefox's address bar . Then look for a preference called "...extensions.firebug.dojofirebugextension.aliases", and set it with a JSON value (using double quotes -- not single quotes) similar to this one:

 
                 { "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .

Note that you need to explicitly remove the preference if you want to debug another page .

I think this method will work while dojo, dijit, and dojox can be accessed as globals ( probably not valid with Dojo 2.0 )


[edit] GFX Main Panel

This extension also supports inspecting the GFX Structure in the web page.

With this panel you can see a tree containing all available GFX surfaces and shapes.


In the following picture you can see the GFX structure displayed in the extension panel. Also you can see the hours hand of the 1st clock highlighted in blue . GFX main panel



Support for Highlighting and inspection:

  • If doing a mouseover in the panel's tree , you will see the pointed shape being highlighted in the web page.
  • You can r-click on a GFX Surface/Shape in the Web page, and select "Inspect in GFX panel". When doing this, the chosen Shape will be displayed in the extension main panel tree.
  • The GFX panel supports Firebug inspector tool (i.e. the arrow-icon in the toolbar):
    • When enabling the inspector tool from inside the GFX panel, you will be able to select any shape in the page.


In the following picture you can see the Firebug inspector tool enabled in the GFX panel. Also, a highlighted shape (under the mouse pointer, in green) in the web page. GFX Inspector tool


The main panel tree is integrated with other Firebug panels: You can r-click on a Surface or Shape and select "Inspect in HTML Tab" or "Inspect in DOM Tab".

[edit] GFX Side Panels

Currently there are 2 GFX side panels bundled with the extension:


[edit] "Info" side panel

It displays properties of the selected Surface. It is only active when a Surface is selected in the main panel's tree.


[edit] "Shape properties" side panel

It displays the properties of the selected GFX Shape.

[edit] Tip: Debugging dojo source with Firebug 1.7 and Firefox 4

Due to a problem with FF 4, when using a source build of dojo with FF 4 you won't be able to see filenames in the files dropdown list of Firebug's Script panel. Probably you will see entries like this:

 dojo.js/eval:eval(...

or like this: Ddt-dojo-broken-files-dropdown.PNG

But if you change 1 line in the dojo[eval] implementation you'll be able to see and debug dojo files again:

Ddt-dojo-16-files-dropdown.PNG

You need to change the following file:

 dojo/_base/_loader/bootstrap.js

and in the eval function implementation, replace this line:

  return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); 	// Object

by this one:

  return eval(scriptFragment); 	// Object

ending in something like this:

  	dojo["eval"] = function(/*String*/ scriptFragment){
		//	summary:
		//		A legacy method created for use exclusively by internal Dojo methods. Do not use
		//		this method directly, the behavior of this eval will differ from the normal
		//		browser eval.
		//	description:
		//		Placed in a separate function to minimize size of trapped
		//		exceptions. Calling eval() directly from some other scope may
		//		complicate tracebacks on some platforms.
		//	returns:
		//		The result of the evaluation. Often `undefined`
 
		//return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); 	// Object		
		return eval(scriptFragment); 	// Object
	}


[edit] Known issues

  • You may use this extension with Firefox 3.6 (and Firebug 1.7!) but JS objects asociated to connections/subscriptions will contain another DOM property called x_dojoExtHashCode_. This may affect your application if it's coded using some foreach var in object loops.
    • you can avoid that property by setting the Firefox preference extensions.firebug.dojofirebugextension.useHashCodes to false. (go to about:config page to set preferences) .
    • Remember: you do not need to change anything if using FF 4 or a newer version.

[edit] Authors

  • Patricio Reyna Almandos (IBM Argentina)
  • Fernando Gomez (IBM Argentina)
Personal tools