mozilla

Compare Revisions

Web Console

Change Revisions

Revision 17134:

Revision 17134 by Sheppy on

Revision 17135:

Revision 17135 by Sheppy on

Title:
Web Console
Web Console
Slug:
Tools/Web_Console
Tools/Web_Console
Tags:
Tools, Debugging, "Web Development", "Web Development:Tools", "web console"
Tools, Debugging, "Web Development", "Web Development:Tools", "web console"
Content:

Revision 17134
Revision 17135
nn13    <div class="note">
14      <strong>Note:</strong> The look of the Web Console will be 
 >changing in upcoming betas of Firefox 4; we will update these scr
 >een shots when we can after that happens.
15    </div>
nn22    <div class="note">
23      <strong>Note:</strong> The Error Console is still available
 >; you can re-enable it by changing the <code>devtools.errorconsol
 >e.enabled</code> preference to <code>true</code> and restarting t
 >he browser.
24    </div>
n60    <h3>n
61      JavaScript code-generated messages
62    </h3>
63    <p>
64      There are four categories of messages that JavaScript code 
>can generate using the <code>Console</code> object. See <a href=" 
>/en/Using_the_Web_Console#The_Console_object" title="en/Using the 
> Web Console#The Console object">The Console object</a> below for 
> details; each of the methods provided for generating log output  
>can be toggled on and off individually using the filter checkboxe 
>s. 
65    </p>66    <p>
66    <h2>67      You can clear the current contents of the log by right-clic
 >king on the log and choosing "Clear". There will be a button for 
 >this in the toolbar in an upcoming beta.
67      Network message window
68    </h2>
69    <p>
70      Let's take a look at what a network request information win
>dow looks like. 
71    </p>
72    <p>
73      <img alt="detailspanel.png" class="internal default" src="/
>@api/deki/files/4749/=detailspanel.png"> 
74    </p>
75    <p>
76      Scrolling this down provides the response headers. If you'v
>e enabled output of the request and response bodies, those are pr 
>esented in this window as well. 
77    </p>
78    <h2>
79      The Console object
80    </h2>
81    <p>
82      The Web Console implements a <code>Console</code> object th
>at works the same as the one provided by <a class=" external" hre 
>f="http://getfirebug.com/" title="http://getfirebug.com/">Firebug 
></a>. It offers four methods for generating different types of lo 
>g output: 
n85      <dt>n70      <dd>
71        <h3>
72          JavaScript code-generated messages
73        </h3>
74        <p>
75          There are four categories of messages that JavaScript c
 >ode can generate using the <code>console</code> object. See <a hr
 >ef="/en/Using_the_Web_Console#The_console_object" title="en/Using
 > the Web Console#The console object">The console object</a> below
 > for details; each of the methods provided for generating log out
 >put can be toggled on and off individually using the filter check
 >boxes.
76        </p>
77        <h2>
78          Network message window
79        </h2>
80        <p>
81          Let's take a look at what a network request information
 > window looks like.
82        </p>
83        <p>
84          <img alt="detailspanel.png" class="internal default" sr
 >c="/@api/deki/files/4749/=detailspanel.png">
85        </p>
86        <p>
87          Scrolling this down provides the response headers. If y
 >ou've enabled output of the request and response bodies, those ar
 >e presented in this window as well.
88        </p>
89        <div class="note">
90          <strong>Note:</strong> Only the first megabyte of data 
 >is logged for each request or response body, so very large reques
 >ts and responses will be truncated.
91        </div>
92        <h2>
93          The console object
94        </h2>
95        <p>
96          The Web Console implements a <code>console</code> objec
 >t that works the same as the one provided by <a class=" external"
 > href="http://getfirebug.com/" title="http://getfirebug.com/">Fir
 >ebug</a>. It offers four methods for generating different types o
 >f log output:
97        </p>
98        <dl>
99          <dt>
86        <code>log()</code>100            <code>log()</code>
87      </dt>101          </dt>
88      <dd>102          <dd>
89        For general output of logging information.103            For general output of logging information.
90      </dd>104          </dd>
91      <dt>105          <dt>
92        <code>info()</code>106            <code>info()</code>
93      </dt>107          </dt>
94      <dd>108          <dd>
95        Informative logging information.109            Informative logging information.
96      </dd>110          </dd>
97      <dt>111          <dt>
98        <code>warn()</code>112            <code>warn()</code>
99      </dt>113          </dt>
100      <dd>114          <dd>
101        Outputs a warning message.115            Outputs a warning message.
102      </dd>116          </dd>
103      <dt>117          <dt>
104        <code>error()</code>118            <code>error()</code>
105      </dt>119          </dt>
106      <dd>120          <dd>
107        Outputs an error message.121            Outputs an error message.
108      </dd>122          </dd>
109    </dl>123        </dl>
110    <p>124        <p>
111      Each of these gets styled differently in the console log, a125          Each of these gets styled differently in the console lo
>nd can be filtered using the checkboxes in the log's toolbar. Tho>g, and can be filtered using the checkboxes in the log's toolbar.
>se are the only differences; they don't cause any behavioral diff> Those are the only differences; they don't cause any behavioral 
>erence in how your code runs. Using the different logging levels >difference in how your code runs. Using the different logging lev
>carefully can help you use the filter controls to focus on the me>els carefully can help you use the filter controls to focus on th
>ssages that matter most to you at any given time.>e messages that matter most to you at any given time.
112    </p>126        </p>
113    <div class="note">127        <div class="note">
114      <strong>Note:</strong> If a <code>Console</code> object is 128          <strong>Note:</strong> If a <code>console</code> object
>already defined on the page, the Web Console's won't override it.> is already defined on the page, the Web Console's won't override
> In addition, if the Web Console panel isn't open, its <code>Cons> it. In addition, if the Web Console panel isn't open, its <code>
>ole</code> object is not defined. So be sure to open the Web&nbsp>console</code> object is not defined. So be sure to open the Web&
>;Console before starting to test your code, or attempts to use th>nbsp;Console before starting to test your code, or attempts to us
>e <code>Console</code> object will abort your script.>e the <code>console</code> object will abort your script. (Note t
 >hat the <code>console</code> object will always be available star
 >ting in an upcoming beta).
115    </div>129        </div>
116    <p>130        <p>
117      These functions accept as many arguments as you like; the s131          These functions accept as many arguments as you like; t
>tring representations of each argument gets appended together to >he string representations of each argument gets appended together
>create the output, so you can do things like:> to create the output, so you can do things like:
118    </p>132        </p>
119    <pre>133        <pre>
n124    <p>n138        <p>
125      The output is:139          The output is:
126    </p>140        </p>
127    <pre>141        <pre>
n130    <h2>n144        <h2>
131      The command line interpreter145          The command line interpreter
132    </h2>146        </h2>
133    <p>147        <p>
134      You can interpret JavaScript expressions in real time using148          You can interpret JavaScript expressions in real time u
> the command line provided by the Web Console. See the little box>sing the command line provided by the Web Console. See the little
> with the "&gt;"&nbsp;prompt in it?&nbsp;That's the command line.> box with the "&gt;"&nbsp;prompt in it?&nbsp;That's the command l
 >ine.
135    </p>149        </p>
136    <p>150        <p>
137      <img alt="cmdline.png" class="internal default" src="/@api/151          <img alt="cmdline.png" class="internal default" src="/@
>deki/files/4750/=cmdline.png" style="border: 1px solid black;">>api/deki/files/4750/=cmdline.png" style="border: 1px solid black;
 >">
138    </p>152        </p>
139    <p>153        <p>
140      Any JavaScript expression you type will be evaluated, and t154          Any JavaScript expression you type will be evaluated, a
>he result output into the console log. You can do anything from s>nd the result output into the console log. You can do anything fr
>imple computations to evaluating complex expressions that can eve>om simple computations to evaluating complex expressions that can
>n include variables defined on the current page.> even include variables defined on the current page.
141    </p>155        </p>
142    <p>156        <p>
143      You can also use the up and down arrow keys to cycle throug157          You can also use the up and down arrow keys to cycle th
>h the history of the commands you've entered.>rough the history of the commands you've entered.
144    </p>158        </p>
145    <h3>159        <h3>
146      Basic usage160          Basic usage
147    </h3>161        </h3>
148    <p>162        <p>
149      You can use the command line interpreter as a simple calcul163          You can use the command line interpreter as a simple ca
>ator. You probably won't, but you can:>lculator. You probably won't, but you can:
150    </p>164        </p>
151    <p>165        <p>
152      <img alt="simpleexpr.png" class="internal default" src="/@a166          <img alt="simpleexpr.png" class="internal default" src=
>pi/deki/files/4751/=simpleexpr.png" style="border: 1px solid blac>"/@api/deki/files/4751/=simpleexpr.png" style="border: 1px solid 
>k;">>black;">
153    </p>167        </p>
154    <p>168        <p>
155      For convenience, the Web Console will try to autocomplete v169          For convenience, the Web Console will try to autocomple
>ariable and function names it knows about. If it guesses wrong, y>te variable and function names it knows about. If it guesses wron
>ou can either keep typing (and it will update its guess), or you >g, you can either keep typing (and it will update its guess), or 
>can hit tab to get the next possible match.>you can hit tab to get the next possible match.
156    </p>170        </p>
157    <p>171        <p>
158      <img alt="autocomplete.png" class="internal default" src="/172          <img alt="autocomplete.png" class="internal default" sr
>@api/deki/files/4752/=autocomplete.png" style="border: 1px solid >c="/@api/deki/files/4752/=autocomplete.png" style="border: 1px so
>black;">>lid black;">
159    </p>173        </p>
160    <p>174        <p>
161      You can directly access variables defined on the page:175          You can directly access variables defined on the page:
162    </p>176        </p>
163    <p>177        <p>
164      <img alt="variables.png" class="internal default" src="/@ap178          <img alt="variables.png" class="internal default" src="
>i/deki/files/4753/=variables.png" style="border: 1px solid black;>/@api/deki/files/4753/=variables.png" style="border: 1px solid bl
>">>ack;">
165    </p>179        </p>
166    <p>180        <p>
167      Here we see that <a class=" external" href="http://jquery.c181          Here we see that <a class=" external" href="http://jque
>om" title="http://jquery.com/">jQuery</a> is in use by the page w>ry.com" title="http://jquery.com/">jQuery</a> is in use by the pa
>e're looking at. Note what happens if we type "jQuery." then hit >ge we're looking at. Note what happens if we type "jQuery." then 
>tab:>hit tab:
168    </p>182        </p>
169    <p>183        <p>
170      <img alt="jquery-tab.png" class="internal default" src="/@a184          <img alt="jquery-tab.png" class="internal default" src=
>pi/deki/files/4754/=jquery-tab.png" style="border: 1px solid blac>"/@api/deki/files/4754/=jquery-tab.png" style="border: 1px solid 
>k;">>black;">
171    </p>185        </p>
172    <p>186        <p>
173      If we keep hitting tab, we get successive hints as to what 187          If we keep hitting tab, we get successive hints as to w
>we might be looking for.>hat we might be looking for.
174    </p>188        </p>
175    <h3>189        <h3>
176      Manipulating the page190          Manipulating the page
177    </h3>191        </h3>
178    <p>192        <p>
179      You can actually make changes to the values of variables on193          You can actually make changes to the values of variable
> the page to test things out. Just add "window." to the beginning>s on the page to test things out. Just add "window." to the begin
> of the variable name to make it visible to the page. For example>ning of the variable name to make it visible to the page. For exa
>, if the code on the page defines a variable <code>counter</code>>mple, if the code on the page defines a variable <code>counter</c
>, you can change it with:>ode>, you can change it with:
180    </p>194        </p>
181    <pre>195        <pre>
t184    <p>t198        <p>
185      You can even call functions defined by the page. For exampl199          You can even call functions defined by the page. For ex
>e, consider the Reddit home page, where we know that there's a he>ample, consider the Reddit home page, where we know that there's 
>ader on the page whose ID is "header". We can hide it by calling >a header on the page whose ID is "header". We can hide it by call
>jQuery's <code>hide()</code> method:>ing jQuery's <code>hide()</code> method:
186    </p>200        </p>
187    <p>201        <p>
188      <img alt="callfunction.png" class="internal default" src="/202          <img alt="callfunction.png" class="internal default" sr
>@api/deki/files/4755/=callfunction.png" style="border: 1px solid >c="/@api/deki/files/4755/=callfunction.png" style="border: 1px so
>black;">>lid black;">
189    </p>203        </p>
190    <h3>204        <h3>
191      Inspecting objects205          Inspecting objects
192    </h3>206        </h3>
193    <p>207        <p>
194      Any time an object is output, you see it in the log as <cod208          Any time an object is output, you see it in the log as 
>e>[object <em>objectName</em>]</code>. If you click on this, you ><code>[object <em>objectName</em>]</code>. If you click on this, 
>get the object inspector. So in the above example, if you click o>you get the object inspector. So in the above example, if you cli
>n <code>[object Object]</code>, you see this window:>ck on <code>[object Object]</code>, you see this window:
195    </p>209        </p>
196    <p>210        <p>
197      <img alt="objectinspector.png" class="internal default" src211          <img alt="objectinspector.png" class="internal default"
>="/@api/deki/files/4756/=objectinspector.png">> src="/@api/deki/files/4756/=objectinspector.png">
198    </p>212        </p>
199    <p>213        <p>
200      This shows you the state of the object at the moment you cl214          This shows you the state of the object at the moment yo
>icked to open the inspector. Click the Update button to refresh t>u clicked to open the inspector. Click the Update button to refre
>he display to show the current contents of the object.>sh the display to show the current contents of the object.
215        </p>
216      </dd>
201    </p>217    </dl>

Back to History