mozilla

Compare Revisions

Browser Console

Change Revisions

Revision 484489:

Revision 484489 by wbamberg on

Revision 509107:

Revision 509107 by Noitidart on

Title:
Browser Console
Browser Console
Slug:
Tools/Browser_Console
Tools/Browser_Console
Content:

Revision 484489
Revision 509107
n74      The Browser Console displays messages logged by all Firefoxn74      The Browser Console displays messages logged by all Firefox
> add-ons. To use the console API from a traditional or bootstrapp> add-ons.
>ed add-on, get it from the Console module: 
75    </p>
76    <h4 id="Messages_from_add-ons">
77      Console.jsm
78    </h4>
75    </p>79    <p>
80      To use the console API from a traditional or bootstrapped a
 >dd-on, get it from the Console module.
81    </p>
82    <p>
83      One exported symbol from Console.jsm is "console". Below is
 > an example of how to acess it, which adds a message to the Brows
 >er Console.
84    </p>
nn86const Cu = Components.utils;
87const consoleJSM = 
77let console = (Cu.import("resource://gre/modules/devtools/Console88Cu.import("resource://gre/modules/devtools/Console.jsm", {});
>.jsm", {})).console; 
89let console = consoleJSM.console; //access exported symbol of "co
 >nsole" from the Console.jsm
90 
78<code>console.log("Hello from Firefox code");</code>91<code>console.log("Hello from Firefox code"); //output messages t
 >o the console</code>
tt93    <p>
94      &nbsp;
95    </p>
96    <p>
97      The full module with other functionality is found here on&n
 >bsp;<a href="http://mxr.mozilla.org/mozilla-release/source/toolki
 >t/devtools/Console.jsm">Mozilla Cross-Reference</a>.
98    </p>
99    <p>
100      For more methods of the console exported attribute of the C
 >onsole.jsm see this article: <a href="/en-US/docs/Web/API/console
 >?redirectlocale=en-US&amp;redirectslug=DOM%2Fconsole">Console</a>
101    </p>
102    <h4 id="Messages_from_add-ons">
103      HUDService
104    </h4>
105    <p>
106      There is also the HUDService which allows access to the Bro
 >wse Console. The module is available at <a href="http://mxr.mozil
 >la.org/mozilla-release/source/browser/devtools/webconsole/hudserv
 >ice.js">Mozilla Cross-Reference</a>. We see we can not only acces
 >s the Browser Console but also Web Console.
107    </p>
108    <p>
109      Here is an example on how to clear the contents of the Brow
 >ser console:
110    </p>
111    <pre class="brush: js">
112var devtools = Cu.import("resource://gre/modules/devtools/Loader.
 >jsm", {}).devtools;
113var HUDService = devtools.require("devtools/webconsole/hudservice
 >");
114 
115var hud = HUDService.getBrowserConsole();
116hud.jsterm.clearOutput(true);
117</pre>
118    <p>
119      If you would like to access the content document of the Bro
 >wser Console this can be done with the HUDService. This example h
 >ere makes it so that when you mouse over the "Clear" button it wi
 >ll clear the Browser Console:
120    </p>
121    <pre class="brush: js">
122var devtools = Cu.import("resource://gre/modules/devtools/Loader.
 >jsm", {}).devtools;
123var HUDService = devtools.require("devtools/webconsole/hudservice
 >");
124 
125var hud = HUDService.getBrowserConsole();
126 
127var clearBtn = hud.chromeWindow.document.querySelector('.webconso
 >le-clear-console-button');
128clearBtn.addEventListener('mouseover', function(){
129  hud.jsterm.clearOutput(true)
130}, false);
131</pre>
132    <h4 id="Messages_from_add-ons">
133      Bonus Features Available
134    </h4>

Back to History