FirebugWiki - User contributions [en]

DojoFirebugExtension Reference Guide

2013-04-13T18:46:40Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

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

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==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:'''
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 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).

* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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 .
[[File:GFX-extension-small.PNG|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.
[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2013-04-13T18:46:12Z

Patricioreyna: /* Intro */

[[File:ddt-logo.PNG]]

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

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* '''Download from:'''
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 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).

* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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 .
[[File:GFX-extension-small.PNG|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.
[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:50:03Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* '''Download from:'''
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 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).

* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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 .
[[File:GFX-extension-small.PNG|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.
[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:49:23Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 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).

* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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 .
[[File:GFX-extension-small.PNG|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.
[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:43:16Z

Patricioreyna: /* GFX Main Panel */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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 .
[[File:GFX-extension-small.PNG|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.
[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:41:32Z

Patricioreyna: /* GFX Main Panel */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

[[File:GFX-extension-small.PNG|GFX main panel]]

In the 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 .

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

[[File:Inspector-tool-small.png|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".

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

File:Inspector-tool-small.png

2012-05-20T22:39:56Z

Patricioreyna:

DojoFirebugExtension Reference Guide

2012-05-20T22:07:52Z

Patricioreyna: /* GFX Side Panels */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

[[File:GFX-extension-small.PNG|GFX main panel]]

In the 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 .

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

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

==GFX Side Panels==

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

==="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.

==="Shape properties" side panel===

It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:06:59Z

Patricioreyna: /* GFX Main Panel */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

[[File:GFX-extension-small.PNG|GFX main panel]]

In the 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 .

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

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

==GFX Side Panels==

==="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.

==="Shape properties" side panel===
It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:06:37Z

Patricioreyna: /* GFX Main Panel */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

[[File:GFX-extension-small.PNG|GFX main panel]]

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

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

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

==GFX Side Panels==

==="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.

==="Shape properties" side panel===
It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T22:04:55Z

Patricioreyna: /* GFX Main Panel */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

[[File:GFX-extension-small.PNG|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.

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

==GFX Side Panels==

==="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.

==="Shape properties" side panel===
It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

File:GFX-extension-small.PNG

2012-05-20T22:03:35Z

Patricioreyna:

DojoFirebugExtension Reference Guide

2012-05-20T21:56:53Z

Patricioreyna: /* GFX Side Panels */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

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

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

==GFX Side Panels==

==="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.

==="Shape properties" side panel===
It displays the properties of the selected GFX Shape.

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:56:00Z

Patricioreyna:

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

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

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

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

==GFX Side Panels==

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:40:31Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 11 and 12 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:24:41Z

Patricioreyna: /* Known issues */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:17:44Z

Patricioreyna: /* Support for aliases when using multiple dojo versions on page */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 )

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:17:13Z

Patricioreyna: /* Support for aliases when using multiple dojo versions on page */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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 as of Dojo 2.0 )

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-20T21:14:31Z

Patricioreyna: /* Support for aliases when using multiple dojo versions on page */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

Firebug Extensions

2012-05-20T21:10:59Z

Patricioreyna: /* Dojo Firebug Extension */

Firebug extensions augment or otherwise enhance the Firebug extension. Firebug extensions typically come in the form of Firefox add-ons.

List of known Firebug extensions (in alphabetical order):
{| style="width:100%"
|-
| [[#Acebug | Acebug]]
| [[#Adobe_BrowserLab | Adobe BrowserLab]]
| [[#AMF_Explorer | AMF Explorer]]
| [[#Arboreal | Arboreal]]
|-
| [[#Chromebug | Chromebug]]
| [[#Closure_Inspector | Closure Inspector]]
| [[#CodeBurner | CodeBurner]]
| [[#ColdFire | ColdFire]]
|-
| [[#ConsoleExport | ConsoleExport]]
| [[#ConsoleML | ConsoleML]]
| [[#Crossfire | Crossfire]]
| [[#CSS_Usage | CSS Usage]]
|-
| [[#cssUpdater | cssUpdater]]
| [[#Dojo_Firebug_Extension | Dojo Firebug Extension]]
| [[#Drupal_For_Firebug | Drupal For Firebug]]
| [[#Eventbug | Eventbug]]
|-
| [[#FireAtlas | FireAtlas]]
| [[#Firebug_Autocompleter | Firebug Autocompleter]]
| [[#Firebug_Code_Coverage | Firebug Code Coverage]]
| [[#Firebug_Paint_Events | Firebug Paint Events]]
|-
| [[#Firecookie | Firecookie]]
| [[#Firediff | Firediff]]
| [[#FireEyes | FireEyes]]
| [[#FireFile | FireFile]]
|-
| [[#Firefinder | Firefinder]]
| [[#FireFlow | FireFlow]]
| [[#Firefocus | Firefocus]]
| [[#FireFontFamily | FireFontFamily]]
|-
| [[#FireLinkReport | FireLinkReport]]
| [[#FirePath | FirePath]]
| [[#FirePHP | FirePHP]]
| [[#Firepicker | Firepicker]]
|-
| [[#FirePython | FirePython]]
| [[#Firequark | Firequark]]
| [[#FireQuery | FireQuery]]
| [[#FireRainbow | FireRainbow]]
|-
| [[#FireSass | FireSass]]
| [[#FireSpider | FireSpider]]
| [[#FireStarter | FireStarter]]
| [[#FireStylus | FireStylus]]
|-
| [[#Firesymfony | Firesymfony]]
| [[#Flashbug | Flashbug]]
| [[#FormBug | FormBug]]
| [[#Illuminations for Developers | Illuminations for Developers (ExtJS/Dojo/etc) ]]
|-
| [[#Inline_Code_Finder | Inline Code Finder]]
| [[#Javascript_Deminifier | Javascript Deminifier]]
| [[#Jiffy | Jiffy]]
| [[#LiveCoder | Live Coder]]
|-
| [[#Log_to_NetPanel | Log to NetPanel]]
| [[#NetExport | NetExport]]
| [[#Net_Panel_History_Overlay | Net Panel History Overlay]]
| [[#Omnibug | Omnibug]]
|-
| [[#Page_Speed | Page Speed]]
| [[#Pixel_Perfect | Pixel Perfect]]
| [[#selectbug | selectbug]]
| [[#Widerbug | Widerbug]]
|-
| [[#XRefresh | XRefresh]]
| [[#YSlow | YSlow]]
| [[#ZikulaBug | ZikulaBug]]
|}

''Are you an author of a new extension for Firebug and want us to update the page? Just open a new issue on Firebug [http://code.google.com/p/fbug/issues/list?start=0 issue list].''

== Creating Extensions ==

* See [[Firebug Internals]]
* [[Extension Installation Error Codes]]

== Existing Extensions ==

=== Miscellaneous ===

==== Firecookie ====
[[Image:Firebug-extlist-firecookie.png|thumb|400px|Firecookie]]

Firecookie is a an extension for Firebug that allows to view, manage and debug cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug. This means that web developers have the functionality accessible within the familiar Firebug's UI.

* Visit [http://www.janodvarko.cz/firecookie website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/6683 Mozilla Addons] site
* Get the [http://code.google.com/p/firecookie/source/checkout source code] (Firebug's BSD-style license)
* Report an [http://code.google.com/p/firecookie/ issue]

Author: [http://www.softwareishard.com/blog/about/ Jan Odvarko]

<div style="clear:both;"></div>
==== Crossfire ====
[[Crossfire]] is a Firebug extension which implements a JSON protocol to allow remote clients (like an IDE or code editor) to connect to Firebug.

* Read more about [[Crossfire]]
* Download from [http://getfirebug.com/releases/crossfire/ getfirebug.com]
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fcrossfire%2Fbranches source code] (Firebug's BSD-style license)
* Report an [http://code.google.com/p/fbug/ issue]

Author: Michael G. Collins, FWG

<div style="clear:both;"></div>
==== FireStarter ====
FireStarter is a Firebug extension that extends Firebug's activation model with advanced features.

* Download from [http://getfirebug.com/releases/firestarter/ getfirebug.com]
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Ffirestarter%2Fbranches source code] (Firebug's BSD-style license)
* Report an [http://code.google.com/p/fbug/issues/list issue]
* Ask a question in the [http://groups.google.com/group/firebug news group]

<div style="clear:both;"></div>
==== Drupal For Firebug ====
[[Image:Firebug-extlist-drupalforfirebug.png|thumb|400px|Drupal For Firebug]]

Drupal for Firebug extends Firebug to provide Drupal specific debugging and
status messages to help with Drupal development.

* Visit [http://drupal.org/project/drupalforfirebug website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/8370 Mozilla Add-ons] site.

<div style="clear:both;"></div>
==== Firediff ====
[[Image:Firebug-extlist-firediff.png|thumb|400px|Firediff]]

Firediff is a Firebug extension whose goal is to provide additional insight into the changes that are being made to the components of the page. Firediff currently requires a recent build of Firebug, with a strict requirement of at least version 1.4.

* Visit [http://www.incaseofstairs.com/firediff/ website]

<div style="clear:both;"></div>
==== FireFile ====
FireFile is a Firebug extension to save CSS files edited with Firebug to your web server. This makes Firebug the first CSS editor with live preview and remote saving, which enables ultra fast web design.

* Download from [https://addons.mozilla.org/en-US/firefox/addon/52365/ Mozilla Add-ons] site
* See [https://github.com/tobiasstrebitzer/FireFile/wiki FireFile's github wiki] or <del>[http://www.strebitzer.at/projects/firefile/docs/ more info]</del> (broken link: server not found)

<div style="clear:both;"></div>

==== cssUpdater ====
[[Image:Firebug-extlist-cssupdater.png|thumb|400px|cssUpdater]]

cssUpdater lets you live sync and save your Firebug CSS changes with one click. So when you reload your site, your layout is preserved.

* Visit [http://www.cssupdater.com/ website]
* Download from [http://www.cssupdater.com/install cssupdater.com] or from [https://addons.mozilla.org/en-US/firefox/addon/cssupdater/ Mozilla Add-ons] site
* Report an [http://www.cssupdater.com/disqus issue]

Author: Johan Andersson

<div style="clear:both;"></div>
==== Firefocus ====
[[Image:Firebug-extlist-firefocus.png|thumb|400px|Firefocus]]

Firefocus is a simple Firebug extension that tracks the element that currently has focus. Its primary purpose is to assist the debugging of advanced keyboard implementations. Firefocus requires Firebug 1.4 or later.

* Visit [http://www.incaseofstairs.com/firefocus/ website]

<div style="clear:both;"></div>
==== FormBug ====
FormBug simulates HTML form fill-in and serialization as an aid to testing form-intensive sites.

* Visit [http://home.peteresnyder.com/projects/formbug website]

<div style="clear:both;"></div>
==== XRefresh ====
[[Image:Firebug-extlist-xrefresh.png|thumb|400px|XRefresh]]

XRefresh can refresh browser as you modify source files. This is especially usefull for editing CSS files on a development machine with two monitors. When you hit CTRL+S (or whatever key for save), XRefresh will detect it and refresh the web page for you.

* Visit [http://xrefresh.binaryage.com/ website]
* Download from [https://github.com/darwin/xrefresh/downloads github]

<div style="clear:both;"></div>
==== Omnibug ====
[[Image:Firebug-extlist-omnibug.png|thumb|400px|Omnibug]]

Omnibug is a plugin for Firebug to ease developing web metrics implementations. Each outgoing request (sent by the browser) is checked for a pattern; if a match occurs, the URL is displayed in a Firebug panel, and decoded to show the details of the request. In addition, requests can be logged to the filesystem.

* Visit [http://www.rosssimpson.com/dev/omnibug.html website]

<div style="clear:both;"></div>
==== Firebug Paint Events ====
[[Image:FirebugPaintEvents.png|thumb|400px|Firebug Paint Events]]

Firebug Paint Events allows to view details of MozAfterPaint events, using Firebug.

* Visit [http://kylescholz.com/blog/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9620 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== Deadbug ====
Deadbug modifies the Firebug status bar icon to change to an image of an upside down (i.e. 'dead') bug when Firebug is turned off. This allows people who are colorblind or have low-contrast displays to easily tell whether Firebug is active.

* [[File:Fb_dead_logo1_transparent.png]] Dead bug icon designed by Kara Rawson.
* [http://collinsmichaelg.me/deadbug-2.0.xpi Download]

<div style="clear:both;"></div>
==== Adobe BrowserLab ====
[[Image:Adobe-browserlab-for-firebug.png|thumb|400px|Adobe BrowserLab]]

Launch Adobe BrowserLab directly from Firebug, to preview temporary changes you’ve made using Firebug. BrowserLab generates screenshots of your pages (public or behind a firewall) in multiple browsers.

* Visit [https://browserlab.adobe.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/231196/ Mozilla Add-ons] site

<div style="clear:both;"></div>
==== ConsoleExport ====
[[Image:Console-export.png|thumb|400px|Console Export]]

ConsoleExport is a Firebug extension that allows exporting logs from the [[Console Panel]]. Once the extension is installed there is a new Export button available in the Console Panel toolbar.

* Visit [http://www.softwareishard.com/blog/consoleexport/ home page]
* Download from [http://www.softwareishard.com/blog/consoleexport/ softwareishard.com]
* Author: [http://www.janodvarko.cz/ Jan Odvarko]

<div style="clear:both;"></div>
==== selectbug ====
[[Image:Selectbug.png|thumb|400px|selectbug]]

selectbug enhances the [[CSS Panel]] by a Side Panel, that shows all nodes, to which the selected rule was applied.

* Download from [http://getfirebug.com/releases/selectbug/ getfirebug.com]
* Get the [http://code.google.com/p/fbug/source/browse/#svn%2Fextensions%2Fselectbug%2Fbranches source code]
* Author: [[User:Johnjbarton|John J. Barton]]

<div style="clear:both;"></div>

=== UI Enhancements ===

==== Acebug ====
[[Image:Firebug-extlist-acebug.png|thumb|400px|Acebug]]

Acebug is a Firefox add-on that integrates with Firebug is a simple Firebug extension that brings some of the awesome features of the Ajax.org Cloud9 Editor (Ace) to Firebug's large command line.

'''Features'''
* Syntax Highlighting
* Auto indentation and outdent
* Highlight matching parentheses
* Load from file
* Save to file
* Execute selection
* Stream Comment

'''We also plan on adding a bunch of new features to Acebug in the future'''
* Validate as you type
* Wordwrap
* Auto-completion
* Fully customizable key bindings including VI and Emacs modes
* Themes (TextMate themes can be imported)
* Display hidden characters
* Integrate with the script panel so that the whole panel works with your chosen syntax highlighting when debugging

'''Links'''
* Visit [http://www.msi-stuff.com/acebug/ website]
* Download from [https://addons.mozilla.org/de/firefox/addon/acebug/ Mozilla Add-ons] site
* Get the source from [https://github.com/MikeRatcliffe/Acebug github]
* Use the [https://github.com/MikeRatcliffe/Acebug/issues issues list] to report an issue

<div style="clear:both;"></div>
==== CodeBurner ====
[[Image:CodeBurnerForFirebug.png|thumb|400px|CodeBurner]]

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension's core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example.

Author: [http://www.sitepoint.com/ SitePoint] ([https://addons.mozilla.org/en-US/firefox/addon/10273 Download])

<div style="clear:both;"></div>
==== Firebug Autocompleter ====
[[Image:Firebug_Autocompleter.png|thumb|400px|Firebug Autocompleter]]

Firebug Autocompleter adds an auto-completion to Firebug's [[Console Panel#Command Editor|Command Editor]], which can be toggled on and off.

* Download from [https://addons.mozilla.org/de/firefox/addon/firebug-autocompleter/ Mozilla Add-ons] site

Author: yamapikarya

<div style="clear:both;"></div>
==== Firefinder ====
[[Image:Firebug-extlist-firefinder.png|thumb|400px|Firefinder]]

Firefinder is an extension to Firebug and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

View the results and then share them with a friend via the FriendlyFire feature, or click Inspect to go to the corresponding element in Firebug's HTML tab.

* Visit [http://robertnyman.com/firefinder/ website]
* Download from [https://addons.mozilla.org/firefox/addon/11905 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== Firequark ====
[[Image:Firebug-extlist-firequark.png|thumb|400px|Firequark]]

Firequark is an extension to Firebug to aid the process of HTML Screen Scraping. Firequark automatically extracts css selector for a single or multiple html node(s) from a web page using Firebug (a web development plugin for Firefox). The css selector generated can be given as an input to html screen scrapers like Scrapi to extract information. Firequark is built to unleash the power of css selector for use of html screen scraping.

* Visit [http://www.quarkruby.com/2007/9/5/firequark-quick-html-screen-scraping website]

<div style="clear:both;"></div>
==== Pixel Perfect ====
[[Image:Firebug-extlist-pixelperfect-thumbnail.png|thumb|400px|Pixel Perfect]]

Pixel Perfect is a firebug extension that allows web developers to easily overlay a web composition over top of the developed html.

* Visit [http://www.pixelperfectplugin.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7943 Mozilla Add-ons] site
* Report an [https://github.com/openhouseconcept/PixelPerfect/issues issue]

<div style="clear:both;"></div>
==== FireRainbow ====
[[Image:Firebug-extlist-firerainbow.png|thumb|400px|FireRainbow]]

FireRainbow brings Javascript syntax highlighting to Firebug.

* Visit [http://firerainbow.binaryage.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9603 Mozilla Add-ons] site

Author: Antonin Hildebrand

<div style="clear:both;"></div>

==== Widerbug ====
[[Image:Firebug-extlist-widerbug.png|thumb|400px|Widerbug]]

A modified version of Firebug optimized for widescreen monitors.

* Visit [http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/13135 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== Firepicker ====
[[Image:Firebug-extlist-firepicker.png|thumb|400px|Firepicker]]

Firepicker automatically adds color picker to Firebug's inline CSS editor.

* Visit [http://thedarkone.github.com/firepicker website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/15032 Mozilla Add-ons] site (experimental)

<div style="clear:both;"></div>
==== FireSass ====
FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.

* Visit [http://sass-lang.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/103988/ Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FireStylus ====
[[Image:FireStylus.png|thumb|400px|FireStylus]]

FireStylus is a Firebug extension that makes Firebug display the Stylus filename and line numbers of the Stylus-generated CSS styles rather than those of the generated CSS.

* Visit [https://github.com/parallel/firestylus website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/firestylus-for-firebug/ Mozilla Add-ons] site

Author: Julien Kernec'h

<div style="clear:both;"></div>
==== Arboreal ====
[[Image:Arboreal.wiki.png|thumb|400px|Arboreal]]

Arboreal is a Firebug extension for DOM tree visualization.

* Visit [http://www.alexspengler.de/arboreal/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/228373/ Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FirePath ====
[[File:Firepath.png|thumb|400px|FirePath]]

FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions and CSS 3 selectors.

* Visit [http://code.google.com/p/firepath/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11900/ Mozilla Add-ons] site

<div style="clear:both;"></div>
=== Debugging ===

==== Chromebug ====
[[Image:Firebug-extlist-chromebug.png|thumb|400px|Chromebug]]

[[Chromebug]] is Firebug for XUL applications, especially Firefox extensions. We use Chromebug to debug Firebug!
* [[Chromebug User Guide]]
* Requires Firebug 1.5
* Works on Firefox 3.0 and later
* Newsgroup: [http://groups.google.com/group/mozilla.addons.chromebug/topics mozilla.addons.chromebug]

* Get [https://code.google.com/p/fbug/source/browse/#svn/chromebug/branches source code]

Author: John J. Barton ([http://getfirebug.com/releases/chromebug/ Download])

<div style="clear:both;"></div>
==== Eventbug ====
[[Image:Eventbug.png|thumb|400px|Eventbug]]

Eventbug is a Firebug extension that lists all of the event handlers on the page grouped by event type (see a [http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/ blog post]).

* The [https://github.com/firebug/eventbug source code] has Firebug's BSD-style license.
* Download from [http://getfirebug.com/releases/eventbug/ getfirebug.com]
* Use Firebug's [http://code.google.com/p/fbug/issues/list issue tracker] to report an issue.
* Use Firebug's [http://groups.google.com/group/firebug news group] to ask a question.

Author: John J. Barton, Jan Odvarko ([http://getfirebug.com/releases/eventbug/ Download])

<div style="clear:both;"></div>

==== Firebug Code Coverage ====
[[Image:Firebug-extlist-codecoverage-thumbnail.png|thumb|400px|Firebug Code Coverage]]

Firebug Code Coverage adds entry function code coverage for JavaScript code. Adds a button next to the Profiler in Firebug.

Author: Zach Leatherman, download from Mozilla [https://addons.mozilla.org/en-US/firefox/addon/4837 Add-ons site] (experimental)

Code Coverage for Firebug This Firebug extension is used to report Javascript code coverage. Zach's extension was migrated to Firebug 1.6/Firefox 3.6

Author: Jun Ma, download from Mozilla [https://addons.mozilla.org/en-US/firefox/addon/code-coverage-v2-for-firebug/ Add-ons site] (experimental)

<div style="clear:both;"></div>
==== FirePHP ====
[[Image:Firebug-extlist-firephp-thumbnail.png|thumb|400px|FirePHP]]

''FirePHP'' enables you to print to your Firebug Console using a simple PHP function call. All data is sent via a set of X-FirePHP-Data response headers. This means that the debugging data will not interfere with the content on your page. Thus FirePHP is ideally suited for AJAX development.

* Visit [http://www.firephp.org/ website]
* Report an [http://code.google.com/p/firephp/ issue]
* Join [http://groups.google.com/group/FirePHP FirePHP group]

Author: Christoph Dorn, download from [https://addons.mozilla.org/en-US/firefox/addon/6149 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FireFlow ====
[[Image:Firebug-extlist-fireflow.png|thumb|400px|FireFlow]]

''FireFlow'' uses the [https://developer.mozilla.org/en/Code_snippets/JavaScript_Debugger_Service JSD] to get method call callbacks and logs them in a tree format. It supports searching and adding filters on card.

* Visit [http://blog.imaginea.com/fireflow/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/fireflow/ Mozilla Addons] site

Author: Apurba Nath

<div style="clear:both;"></div>
==== FireQuery ====
[[Image:Firebug-extlist-firequery.png|thumb|400px|FireQuery]]

''FireQuery'' adds a collection of jQuery-related enhancements to Firebug. Recommended for all jQuery developers.

* Visit [http://firequery.binaryage.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12632 Mozilla Add-ons] site

Author: Antonin Hildebrand

<div style="clear:both;"></div>
==== Javascript Deminifier ====
[[Image:JavascriptDeminifier.png|thumb|400px|Javascript Deminifier]]

''Javascript Deminifier'' will deminify javascript before it is downloaded. It is actually not a Firebug extension, because you can also use it with other debuggers.

The plugin uses the algorithm from [http://jsbeautifier.org/ jsbeautifier.org] to beautify JavaScript.

* Visit [https://github.com/benmmurphy/jsdeminifier_xpi/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/javascript-deminifier/ Mozilla Addons] site
* Report an [https://github.com/benmmurphy/jsdeminifier_xpi/issues issue]

Author: Ben Murphy

<div style="clear:both;"></div>
==== LiveCoder ====
[[Image:Firebug-extlist-livecoder-thumbnail.png|thumb|400px|LiveCoder]]

''LiveCoder'' lets you poke at the browser's DOM, just like Firebug. But LiveCoder also lets you examine Firebug itself. In addition to examining the DOM, you can alter it including changing functions. This is a great way to debug your code and test fixes more quickly.

* Visit [http://getlivecoder.com/ website]
* [http://getlivecoder.com/livecoder.xpi/ Download.] [getlivecoder.com] (''experimental'')
Author: Steve Souders.

<div style="clear:both;"></div>

==== Firesymfony ====
[[Image:Firebug-extlist-firesymfony.png|thumb|400px|Firesymfony]]

''Firesymfony'' integrates debugging support for the Symfony PHP development framework in to Firebug.

* Visit [http://www.firesymfony.org/website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9096/ Mozilla Add-ons] site

<div style="clear:both;"></div>
==== ColdFire ====
[[Image:Firebug-extlist-coldfire.png|thumb|400px|ColdFire]]

''ColdFire'' is an extension to Firebug which displays ColdFusion debugging information in a Firebug tab as opposed to the bottom of the page. Because ColdFire sends debugging data to the browser via custom HTTP headers it does not break CSS page layouts and works well with AJAX and Flash Remoting requests.

* Visit [http://coldfire.riaforge.org/ website]

<div style="clear:both;"></div>
==== FirePython ====
[[Image:Firebug-extlist-firepython.png|thumb|400px|FirePython]]

''FirePython'' enables you to debug your application's server side Python code from within your browser. FirePython is a server-side Python library, which hooks into standard Python logging module and sends logging events to a client-side using a Firefox browser extension called [https://addons.mozilla.org/en-US/firefox/addon/11090 FireLogger].

* Visit [http://firepython.binaryage.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/11090 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FireAtlas ====
[[Image:Firebug-extlist-fireatlas.png|thumb|400px|FireAtlas]]

''FireAtlas'' is an extension to Firebug dedicated to [http://www.asp.net/ajax/ ASP.NET AJAX]debugging. This extension will provide you with useful services when developing ASP.NET AJAX web sites:

* PageRequestManager events tracing
* WebService calls tracing and inspection
* Partial Update inspection within Firebug Net Panel
* Application components listing

* Visit [http://fireatlas.chesnaistechnologies.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/12121 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== AMF Explorer ====
[[Image:Firebug-extlist-amfexplorer-thumbnail.png|thumb|400px|AMF Explorer]]

''AMF Explorer'' is based on the JSON Explorer and XML Explorer features of Firebug, AMF Explorer allows web developers to view deserialized AMF messages in Firebug's Net panel.

* Visit [http://amfexplorer.riaforge.org/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/78928 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FireLinkReport ====
[[Image:Firebug-extlist-firelinkreport-thumbnail.png|thumb|400px|FireLinkReport]]

''FireLinkReport'' allows viewing all links on the currently open page.

* Visit [http://www.softwarecocktail.com/projects/firelinkreport/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/58834 Mozilla Add-ons] site (experimental)

<div style="clear:both;"></div>
==== Flashbug ====
[[Image:Firebug-extlist-flashbug.png|thumb|400px|Flashbug]]

Flashbug is a Firebug extension for Flash. It displays all the running .SWF file trace output and requires Flash Player Debugger to work properly.

* Visit [http://blog.coursevector.com/flashbug/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/14465 Mozilla Add-ons] site

Author: [http://coursevector.com/ Gabriel Mariani]

<div style="clear:both;"></div>
==== Closure Inspector ====
A development extension to Firebug for working with Closure Library and Closure Compiler

* Visit [http://code.google.com/p/closure-inspector/ website]

<div style="clear:both;"></div>
==== Illuminations for Developers ====
[[Image:Illumination.png|thumb|400px|Illumination]]

''Illuminations for Developers'' is a tool to help you develop web applications by investing Firebug with the knowledge of your JavaScript framework and your workflow with it.
* Requires Firebug 1.6 or later
* Works on Firefox 3.6 and later
* Visit [http://www.illuminations-for-developers.com/ website]
* Supports ExtJS 2.x, 3.x, 4.x, and Sencha Touch
* Preliminary support for Dojo 1.5, SproutCore, YUI3, Closure Lib, qooXdoo, and jQuery UI

Author: Steven Roussey ([https://addons.mozilla.org/en-US/firefox/addon/illuminations-for-developers/ Mozilla Add-ons]) '''[https://addons.mozilla.org/firefox/downloads/latest/247486/addon-247486-latest.xpi?src=external-Firebug-Wiki Download]'''

<div style="clear:both;"></div>

==== Dojo Firebug Extension ====
[[Image:Ddt-presentation.PNG|thumb|400px|Dojo Firebug Extension]]

Easy access to Dojo features: list dijit registry, and inspect visual widgets, view and breakpoint connections and subscriptions.

* Works on Firefox 3.6 and later
* Requires Firebug 1.6 (preferred Firebug 1.7+)
* Read the [[DojoFirebugExtension Reference Guide|Documentation]]
* Download from [https://getfirebug.com/releases/dojofirebugextension/ getfirebug.com]
* Get the [https://github.com/patricioreyna/dojofirebugextension source code] (Firebug's BSD-style license)
* Report an [http://code.google.com/p/fbug/issues/list issue]

Authors: Patricio Reyna Almandos and Fernando Gomez

<div style="clear:both;"></div>

==== ZikulaBug ====
[[Image:ZikulaBug.png|thumb|400px|ZikulaBug]]

ZikulaBug is a Firebug extension, which provides a friendly interface for Zikula's DebugToolbar. It allows to browse Zikula debug data grouped in eight tabs: General, Configuration, SQL, Templates, Function Executions, Log Console, HTTP request and Settings.

* Visit [https://github.com/zikula/ZikulaBug/wiki website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/zikulabug/ Mozilla Addons] site

Author: Paweł Preneta

<div style="clear:both;"></div>
==== ConsoleML ====
[[Image:ConsoleMLLogo.png|thumb||ConsoleML]]
[[Image:ConsoleML.png|thumb|400px|ConsoleML]]

''ConsoleML'' is an extension to Firebug which displays MarkLogic logging information in Firefox Firebug.

* Visit [http://sirmasolutions.com/index.php/products/ml-firefox-console website]
* Download from [http://sirmasolutions.com/index.php/products/ml-firefox-console Sirma Solutions] site

Features:
* Enables you to debug your application's server-side MarkLogic code from within your browser.
* Works with a build-in MarkLogic logging module. It does not affect page layout and works well with AJAX Remoting requests.
* Reads the MarkLogic Log file and sends logging events to client-side using a Firefox browser extension.
* Gives you an opportunity to save a part of the log files.
* Displays local and remote logs.
* Currently shows debugging information for all MarkLogic log levels: Finest, Finer, Fine, Debug, Config, Info Notice, Warning, Error, Critical, Alert, Emergency
* Offers numerous configuration options for log levels and filters to limit the displayed log to a desired set of options.

Author: SirmaSolutions

<div style="clear:both;"></div>
=== Performance ===

==== YSlow ====
[[Image:Firebug-extlist-yslow-thumbnail.png|thumb|400px|YSlow]]

''YSlow'' analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

YSlow gives you:
* Performance report card
* HTTP/HTML summary
* List of components in the page
* Tools including JSLint

* Visit [http://developer.yahoo.com/yslow/ website]

Author: [http://developer.yahoo.com/yslow/ Yahoo, Inc.] ([https://addons.mozilla.org/en-US/firefox/addon/5369 Download])

<div style="clear:both;"></div>
==== NetExport ====
''NetExport'' is a Firebug extension that allows exporting data from the Net panel.

* Requires [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug 1.5]
* Uses [http://www.softwareishard.com/blog/firebug/http-archive-specification/ HTTP Archive] format for export.
* The extension appends a new '''Export button''' into Net panel's toolbar.
* The [http://code.google.com/p/fbug/source/browse/#svn/netexport/branches/ source code] has Firebug's BSD-style license.
* Use Firebug's [http://code.google.com/p/fbug/issues/list issue list] to report an issue.
* Use Firebug's [http://groups.google.com/group/firebug discussion group] to ask a question.

* Visit [http://www.softwareishard.com/blog/netexport/ website]
* Download from [http://getfirebug.com/releases/netexport/ getfirebug.com]

Author: Jan Odvarko

<div style="clear:both;"></div>
==== Net Panel History Overlay ====
[[Image:Firebug-extlist-history.png|thumb|400px|Net Panel History Overlay]]

''Net Panel History Overlay'' adds history functionality to Firebug's [[Net Panel]].

* Visit [http://digitalmihailo.blogspot.com/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/7189 Mozilla Add-ons] site (experimental)

Author: Mihailo Lalevic

<div style="clear:both;"></div>
==== Jiffy ====
[[Image:Firebug-extlist-jiffy-thumbnail.png|thumb|400px|Jiffy]]

The ''Jiffy'' Firefox extension adds an additional panel to Firebug that provides a visual view of the Javascript time measurements captured by Jiffy-Web.

* Visit [http://billwscott.com/jiffyext/ website]
* Join [http://groups.google.com/group/jiffy-web Jiffy-Web group]

Author: [http://looksgoodworkswell.blogspot.com/ Bill Scott] of [http://www.netflix.com/ NetFlix], download from [https://addons.mozilla.org/en-US/firefox/addon/7613 Mozilla Add-ons] site (experimental)

<div style="clear:both;"></div>
==== Inline Code Finder ====
[[Image:Firebug-extlist-inlinecodefinder.png|thumb|400px|Inline Code Finder]]

''Inline Code Finder'' looks for any of these in a web page:

* inline JavaScript events
* Inline style
* javascript: links

The idea is to promote separation between content (HTML), presentation (CSS) and interaction (JavaScript) - especially the ideas and thinking behind the unobtrusive JavaScript approach.

* Visit [http://www.robertnyman.com/inline-code-finder/ website]
* Download from [https://addons.mozilla.org/en-US/firefox/addon/9641 Mozilla Add-ons] site

Author: Robert Nyman

<div style="clear:both;"></div>
==== CSS Usage ====
[[Image:Firebug-extlist-cssusage.png|thumb|400px|CSS Usage]]

With ''CSS Usage'' you can look at your CSS rules and see which ones of them are actually used on your website and which aren't.

* Download from [https://addons.mozilla.org/en-US/firefox/addon/10704 Mozilla Add-ons] site

<div style="clear:both;"></div>
==== Log to NetPanel ====
[[Image:Firebug-extlist-logtonetpanel.png|thumb|400px|Log to NetPanel]]

''Log to NetPanel'' allows you to add markers to the Net panel from javascript. They appear as extra bars below the network downloads. That way, you can find out at what point in the download sequence specific javascript code is running. If you log twice with the same name, a bar will appear from the first to the second point in time.

* Download from [http://code.google.com/p/log-to-net-panel/downloads/list Google Code]
* See [http://code.google.com/p/log-to-net-panel/ more info]

<div style="clear:both;"></div>
==== Page Speed ====
''Page Speed'' is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

* Visit [http://code.google.com/speed/page-speed/ website]

<div style="clear:both;"></div>
==== FireSpider ====
''FireSpider'' is a an extension for Firebug that can help you find broken or misleading urls and optimize your web page for search engines.

* Download from [http://xrado.hopto.org/post/firespider-extension-for-firebug hopto.org]
[NOTE: the link to the hopto.org site doesn't appear to be working, despite numerous references to it online.
Try this link to the author's own site instead: http://blog.xrado.si/post/firespider-extension-for-firebug .]

<div style="clear:both;"></div>

==== FireFontFamily ====
[[Image:Firebug-extlist-firefontfamily.png|thumb|400px|FireFontFamily]]
''FireFontFamily'' highlights the rendered font-family inside the Style Side Panel

* Download from [https://addons.mozilla.org/en-US/firefox/addon/111672/ Mozilla Add-ons] site

<div style="clear:both;"></div>
==== FireEyes ====
[[Image:FireEyes.png|thumb|400px|FireFontFamily]]
''FireEyes'' is an unprecedented, nextgen web accessibility tool that ensures both static and dynamic content within a web portfolio are compliant with standards such as Section 508, WCAG 1.0, and WCAG 2.0. You can use another tool, but it won’t be fully JavaScript aware or handle event-based page content, like FireEyes.

* Download from [http://www.deque.com/products/worldspace-fireeyes FireEyes] site

DojoFirebugExtension Reference Guide

2012-05-02T22:26:10Z

Patricioreyna: /* Support for aliases when using multiple dojo versions on page */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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 (a hack if you want to call it that way).
To use it, you need to type about:config in Firefox 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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

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

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-02T22:24:40Z

Patricioreyna:

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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 (a hack if you want to call it that way).
To use it, you need to type about:config in Firefox 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:
<syntaxHighlight lang="javascript">
{ "dojo" : "myDojo" , "dijit":"myDijit", "dojox": "myDojox" } .
</syntaxHighlight>

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-02T22:06:22Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* Download from:
** Releases can be found in Mozilla add-ons repository: https://addons.mozilla.org/en-US/firefox/addon/dojofirebugextension/
** Releases, alphas, and betas can be found in getfirebug server: http://getfirebug.com/releases/dojofirebugextension/

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-05-02T22:04:14Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9/10/11 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 11 with Firebug 1.9.x . Dojo extension v1.1.5a1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2012-01-20T22:45:33Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8/9 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-12-26T23:53:23Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8.0 with Firebug 1.9.x . Dojo extension v1.1.3+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-12-26T19:32:30Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 8.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-11-19T21:11:11Z

Patricioreyna: /* Known issues */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues so far :-)
* You could 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-11-19T21:10:06Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-11-19T21:08:32Z

Patricioreyna: /* Intro */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 10/04/2011 Note: (FF 6/7 and Firebug 1.8.x) from time to time the dojo panel isn't displayed by Firebug (we won't know why yet) . To solve this , you need to disable the dojo extension (from the FF addons manager) , restart FF . Then re-enable the extension and restart FF one more time. That's all.

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

File:Ddt-widget-selected-in-tree.PNG

2011-10-21T23:50:51Z

Patricioreyna: uploaded a new version of "File:Ddt-widget-selected-in-tree.PNG"

DojoFirebugExtension Reference Guide

2011-10-21T23:46:47Z

Patricioreyna: /* Side panels */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 10/04/2011 Note: (FF 6/7 and Firebug 1.8.x) from time to time the dojo panel isn't displayed by Firebug (we won't know why yet) . To solve this , you need to disable the dojo extension (from the FF addons manager) , restart FF . Then re-enable the extension and restart FF one more time. That's all.

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

===Widget Properties===

[[File:Ddt-widgetprops-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

File:Ddt-widgetprops-side-panel.PNG

2011-10-21T23:45:44Z

Patricioreyna:

File:Ddt-subscriptions-side-panel.PNG

2011-10-21T23:42:18Z

Patricioreyna: uploaded a new version of "File:Ddt-subscriptions-side-panel.PNG"

File:Ddt-connections-side-panel.PNG

2011-10-21T23:40:55Z

Patricioreyna: uploaded a new version of "File:Ddt-connections-side-panel.PNG"

File:Ddt-info-side-panel.PNG

2011-10-21T23:38:52Z

Patricioreyna: uploaded a new version of "File:Ddt-info-side-panel.PNG"

File:Ddt-presentation.PNG

2011-10-21T23:29:05Z

Patricioreyna: uploaded a new version of "File:Ddt-presentation.PNG"

Dojo Firebug extension main panel

DojoFirebugExtension Reference Guide

2011-10-04T18:37:32Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 10/04/2011 Note: (FF 6/7 and Firebug 1.8.x) from time to time the dojo panel isn't displayed by Firebug (we won't know why yet) . To solve this , you need to disable the dojo extension (from the FF addons manager) , restart FF . Then re-enable the extension and restart FF one more time. That's all.

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-10-04T18:37:08Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 and 7, plus Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 10/04/2011 Note: (FF 6/7 and Firebug 1.8.x) from time to time the dojo panel isn't displayed by Firebug (we won't know why yet) . To solve this , you need to disable the dojo extension (from the FF addons manager) , restart FF . Then re-enable the extension and restart FF one more time. That's all.

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-10-04T18:33:42Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 7.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-09-02T23:24:41Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-09-01T21:32:03Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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.

* '''Compatibility table:'''
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder] (RE-TEST PENDING)
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-09-01T21:31:33Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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.

* Compatibility table:
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder] (RE-TEST PENDING)
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from [http://getfirebug.com/releases/dojofirebugextension/1.7/ 1.7 folder]
** Firefox 5.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]
** Firefox 6.0 with Firebug 1.8.x . Dojo extension v1.1+ from [http://getfirebug.com/releases/dojofirebugextension/1.8/ 1.8 folder]

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-09-01T21:30:07Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 download folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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.

* Compatibility table:
** Firefox 3.6 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder (RE-TEST PENDING)
** Firefox 4.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder
** Firefox 5.0 with Firebug 1.7.3 . Dojo Extension v1.0.x from 1.7 folder
** Firefox 5.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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-09-01T21:21:48Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.8 folder was tested with Firefox 6.0.1 , and Firebug 1.8.2 in Linux and Windows.

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

* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension

* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-07-07T21:32:22Z

Patricioreyna: /* Tested platforms, Installation and other info */ - added new FF 5 compatibility message . Thanks Tylutki for letting us know about this missing info

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.7 folder was tested with Firefox 4.0 and 4.0.1 , and Firefox 5 in Windows with Firebug 1.7.x.
* 07/07/2011 Note: if you previously installed the "dojofirebugextension-1.0.xpi" from this server and now you get a "not compatible with Firefox 5" error, please remove the extension and install it again (from http://getfirebug.com/releases/dojofirebugextension/1.7/dojofirebugextension-1.0.xpi). We updated the compatibility support but kept xpi version number.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension
* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-07-04T18:37:26Z

Patricioreyna: /* Intro */

[[File:ddt-logo.PNG]]

==Intro==
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. Then the extension's original code was contributed to the open source.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.7 folder was tested with Firefox 4.0 and 4.0.1 with Firebug 1.7.x.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension
* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-07-04T18:30:54Z

Patricioreyna: /* Intro */

[[File:ddt-logo.PNG]]

==Intro==
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. IBM contributed the extension's original code to Firebug to contribute to the Dojo community efforts.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.7 folder was tested with Firefox 4.0 and 4.0.1 with Firebug 1.7.x.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension
* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-06-20T22:07:03Z

Patricioreyna: /* Authors */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.7 folder was tested with Firefox 4.0 and 4.0.1 with Firebug 1.7.x.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension
* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos (IBM Argentina)
* Fernando Gomez (IBM Argentina)

DojoFirebugExtension Reference Guide

2011-06-14T01:37:37Z

Patricioreyna: /* Tested platforms, Installation and other info */

[[File:ddt-logo.PNG]]

==Intro==
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.

== Download ==

The Dojo Firebug Extension is available from in the [http://getfirebug.com/releases/dojofirebugextension/ dojofirebugextension] folder at getfirebug.com. Pick version number folder to match your version of Firebug.

==Tested platforms, Installation and other info==

Latest version from 1.7 folder was tested with Firefox 4.0 and 4.0.1 with Firebug 1.7.x.

* You need to '''enable Console and Script panels''' if you want this extension to work properly.
* You may probably want to create an extra profile in Firefox to try this extension (more info here http://www.howtogeek.com/howto/internet/firefox/use-multiple-firefox-profiles-at-the-same-time/ and here http://support.mozilla.com/en-US/kb/Managing-profiles).
* The latest version of the extension will not work with Firebug 1.6.x
** if you want a version for Firebug 1.6.x please go to https://getfirebug.com/releases/dojofirebugextension/1.6/ , but keep in mind that version has fewer features. The recommended combination in this case is: FF 3.6.x + Firebug 1.6.x + this extension
* This extension WILL NOT WORK with Firebug 1.5.x

==Main Panel==

[[File: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

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

[[File:ddt-widget-selected-in-tree.PNG|Widget selected in panel]]

[[File:ddt-widget-selected-in-tree-2.PNG|Widget highlighted in web page]]

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

[[File:ddt-widgets-list.PNG|Widgets list]]

====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)

[[File:ddt-highlevel-props.PNG|Dojo properties of a widget]]

====Other widget options====

This is how '''detached widgets''' look like in the panel:

[[File:ddt-detached-widget.PNG|Detached widget]]

'''Documentation links''' available for widgets:

[[File:ddt-widgets-context-menu.PNG|Context menu for widgets]]

===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).

[[File:ddt-all-connections-main-panel.PNG]]

====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:

<syntaxHighlight lang="javascript">
{ event: '*dojo*' }
</syntaxHighlight>

<syntaxHighlight lang="javascript">
{ object: '*button*' , method: 'onClick' }
</syntaxHighlight>

[[File:ddt-filter-connections-1.PNG]]

'''Picture 1:''' simpler syntax

[[File:ddt-filter-connections-2.PNG]]

'''Picture 2:''' query object .
For this specific example the query was:
<syntaxHighlight lang="javascript">
{ context: '*menu*', method:'from*'}
</syntaxHighlight>

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

[[File:ddt-all-subscriptions-main-panel.PNG]]

==Side panels==

===Info===
Display information about dojo loaded in the web page

[[File:ddt-info-side-panel.PNG]]

===Connections===

[[File:ddt-connections-side-panel.PNG]]

===Subscriptions===

[[File:ddt-subscriptions-side-panel.PNG]]

==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'''
[[File: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''.

[[File:ddt-inspect-1.PNG]]

==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
[[File:ddt-breakpoints-1.PNG]]
[[File:ddt-breakpoints-2.PNG]]

Picture 3: Breakpoints listed in Firebug's Script panel (breakpoints sidepanel)
[[File:ddt-breakpoints-3.PNG]]

Pictures 4 and 5: source code with breakpoints
[[File:ddt-breakpoints-4.PNG]]
[[File:ddt-breakpoints-5.PNG]]

==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:
[[File: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:

[[File: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:
<syntaxHighlight lang="javascript">
return d.global.eval ? d.global.eval(scriptFragment) : eval(scriptFragment); // Object
</syntaxHighlight>

by this one:
<syntaxHighlight lang="javascript">
return eval(scriptFragment); // Object
</syntaxHighlight>

ending in something like this:
<syntaxHighlight lang="javascript">
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
}
</syntaxHighlight>

==Known issues==
This is the list of known issues we know about of :-)
* Does not work with Firebug in a separate window
* You can 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

==Authors==

* Patricio Reyna Almandos
* Fernando Gomez

DojoFirebugExtension Reference Guide

2011-06-14T01:11:33Z

Patricioreyna: /* Tested platforms, Installation and other info */