Compare Revisions

Web Console

Change Revisions

Revision 17128:

Revision 17128 by Sheppy on

Revision 17129:

Revision 17129 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 17128
Revision 17129
tt13    <p>
14      <a href="/@api/deki/files/4748/=webconsole.png" title="webc
 >onsole.png"><img alt="webconsole.png" class="internal default" sr
 >c="/@api/deki/files/4748/=webconsole.png" style="width: 600px; he
 >ight: 254px; border: 1px solid black;"></a>
15    </p>
16    <h2>
17      Opening the Web Console
18    </h2>
19    <p>
20      Opening the Web Console is as simple as selecting the "Web 
 >Console" option from the Tools menu, or by pressing its Control-S
 >hift-K (Command-Shift-K on the Mac) keyboard shortcut. The Web Co
 >nsole will drop down from the top of the screen, shifting the web
 > content down to make room.
21    </p>
22    <h2>
23      The Web Console log
24    </h2>
25    <p>
26      There's a lot of information that can be displayed in the l
 >og. You can turn each of these types of information on and off us
 >ing the checkboxes in the Web Console toolbar. You can also filte
 >r using a text string by entering a filter string in the "filter"
 > edit box in the toolbar.
27    </p>
28    <h3>
29      Browser-generated messages
30    </h3>
31    <p>
32      There are three categories of messages that the browser its
 >elf can generate.
33    </p>
34    <dl>
35      <dt>
36        Network messages
37      </dt>
38      <dd>
39        These messages tell you about network requests. If you cl
 >ick on a network request, you can get a look at the headers and o
 >ther information about the request, including the response.&nbsp;
 >If you'd like to actually log the entire request and response, in
 >cluding the data, right-click on the log and choose the "Log Requ
 >est and Response Bodies" option from the contextual menu that app
 >ears.
40      </dd>
41      <dt>
42        CSS errors
43      </dt>
44      <dd>
45        These messages inform you of CSS errors that occur while 
 >rendering content.
46      </dd>
47      <dt>
48        JavaScript errors
49      </dt>
50      <dd>
51        These messages tell you about JavaScript errors, such as 
 >syntax errors, that occur while interpreting JavaScript code.
52      </dd>
53    </dl>
54    <h3>
55      JavaScript code-generated messages
56    </h3>
57    <p>
58      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.
59    </p>
60    <h2>
61      Network message window
62    </h2>
63    <p>
64      Let's take a look at what a network request information win
 >dow looks like.
65    </p>
66    <p>
67      &nbsp;
68    </p>
69    <h2>
70      The Console object
71    </h2>
72    <p>
73      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:
74    </p>
75    <dl>
76      <dt>
77        <code>log()</code>
78      </dt>
79      <dd>
80        For general output of logging information.
81      </dd>
82      <dt>
83        <code>info()</code>
84      </dt>
85      <dd>
86        Informative logging information.
87      </dd>
88      <dt>
89        <code>warn()</code>
90      </dt>
91      <dd>
92        Outputs a warning message.
93      </dd>
94      <dt>
95        <code>error()</code>
96      </dt>
97      <dd>
98        Outputs an error message.
99      </dd>
100    </dl>
101    <p>
102      Each of these gets styled differently in the console log, a
 >nd can be filtered using the checkboxes in the log's toolbar. Tho
 >se are the only differences; they don't cause any behavioral diff
 >erence in how your code runs.
103    </p>
104    <p>
105      These functions accept as many arguments as you like; the s
 >tring representations of each argument gets appended together to 
 >create the output, so you can do things like:
106    </p>
107    <pre>
108var car = "Dodge Charger";
109var someObject = {str:"Some text", id:5}; 
110console.info("My first car was a", car, ". The object is: ", some
 >Object);
111</pre>
112    <p>
113      The output is:
114    </p>
115    <pre>
116<span style="color: rgb(51, 153, 102);">14:15:20.748: My first ca
 >r was a Dodge Charger . The object is:  [object Object]</span>
117</pre>

Back to History