Restructure of console page and update of page content.
This commit is contained in:
Jonathan Garbee
Родитель
35088d1f66
Коммит
06fa6b31ad
Двоичные данные
docs/console-files/console-context-menu.png
Двоичные данные
docs/console-files/console-context-menu.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 89 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 15 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 75 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
docs/console-files/inspect2.png
Двоичные данные
docs/console-files/inspect2.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 48 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичные данные
docs/console-files/multiline-expression.png
Двоичные данные
docs/console-files/multiline-expression.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 24 KiB |
Двоичные данные
docs/console-files/recent-selection.png
Двоичные данные
docs/console-files/recent-selection.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 43 KiB |
Двоичные данные
docs/console-files/select-login-btn.png
Двоичные данные
docs/console-files/select-login-btn.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 20 KiB |
Двоичные данные
docs/console-files/select-multiple-login.png
Двоичные данные
docs/console-files/select-multiple-login.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 122 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 21 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 23 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 41 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
|
|
@ -0,0 +1,909 @@
|
|||
{{+bindTo:partials.standard_devtools_article}}
|
||||
|
||||
<h1 id="using-the-console">Using the Console</h1>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Utilizing the console gives you the ability to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Log diagnostic information to help debug your web page or application.</li>
|
||||
<li>Enter commands that interact with the document and the Chrome DevTools.</li>
|
||||
</ul>
|
||||
<p>
|
||||
You also may evaluate normal JavaScript expressions.
|
||||
This documentation provides an overview and common uses of the console.
|
||||
You may browse the <a href="console-api">Console API</a> and <a href="commandline-api">Command Line API</a> reference material to understand more functionality.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="collapsible">
|
||||
<h2 id="basic-operation">Basic Operation</h2>
|
||||
|
||||
|
||||
<section>
|
||||
<h3 id="opening-the-console">Opening the Console</h3>
|
||||
<p>
|
||||
The JavaScript Console is available in two places.
|
||||
The Console panel provides primary access.
|
||||
It also is available from within any other panel by using the Drawer.
|
||||
To open the Console tab, do one of the following:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Use the keyboard shortcut <kbd><kbd class="kbd">Command</kbd> + <kbd class="kbd">Option</kbd> + <kbd class="kbd">J</kbd></kbd> (Mac) or <kbd><kbd class="kbd">Control</kbd> + <kbd class="kbd">Shift</kbd> + <kbd class="kbd">J</kbd></kbd> (Windows/Linux).</li>
|
||||
<li>Select <samp><img src="devtools/images/chrome-menu.png" alt="Chrome Menu"> > More Tools > JavaScript Console</samp>.</li>
|
||||
</ul>
|
||||
|
||||
<figure>
|
||||
<img alt="Console panel view" src="console-files/console1.png">
|
||||
<figcaption>
|
||||
A clean console view.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
To open the drawer console press the <kbd class="kbd">Esc</kbd> key on your keyboard or click the <samp>Show Drawer</samp> button in the upper right corner of the Chrome DevTools window.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img alt="Console split-view" src="console-files/console-in-drawer.png">
|
||||
<figcaption>
|
||||
The console in the drawer while on the elements panel.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="clearing-the-console-history">Clearing the console history</h3>
|
||||
<p>
|
||||
To clear the console's history, do one of the following:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Right-click or Ctrl-click anywhere in the Console and choose <samp>Clear Console</samp> from the context menu that appears.</li>
|
||||
<li>Enter the <code><a href="commandline-api#clear">clear()</a></code> Command Line API at the shell prompt.</li>
|
||||
<li>Invoke <code><a href="console-api#consoleclear">console.clear()</a></code> Console API from JavaScript.</li>
|
||||
<li>Use the keyboard shortcut <kbd><kbd class="kbd">Cmd</kbd> + <kbd class="kbd">K</kbd></kbd>, <kbd><kbd class="kbd">^</kbd> + <kbd class="kbd">L</kbd></kbd> (Mac) <kbd><kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">L</kbd></kbd> (Windows and Linux).</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="message-stacking">Message Stacking</h3>
|
||||
<p>
|
||||
The console will stack consecutive messages that contain the same output.
|
||||
This helps keep the information provided to you as concise as possible.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamps disabled (default)</th>
|
||||
<th>Timestamps enabled</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="console-files/timestamps-disabled.png" alt="Timestamps disabled"/></td>
|
||||
<td><img src="console-files/timestamps-enabled.png" alt="Timestamps enabled"/></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<figcaption>
|
||||
Examples of the two stacking states.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
Sample code for testing console stack modes.
|
||||
</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">msgs = ['hello', 'world', 'there'];
|
||||
for (i = 0; i < 20; i++) console.log(msgs[Math.floor((i/3)%3)])
|
||||
</code></pre>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="frame-selection">Frame Selection</h3>
|
||||
<p>
|
||||
The console can operate within different frames of the page.
|
||||
The primary page is the <samp>top frame</samp> for the document.
|
||||
An <code>iframe</code> element for example would create its own frame context.
|
||||
You may specify the frame by using the dropdown beside the filter button.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<img src="console-files/frame-selection.png" alt="frame selection">
|
||||
<figcaption>
|
||||
Selecting a secondary frame.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="console-files/locations-between-frames.png" alt="locations between frames">
|
||||
<figcaption>
|
||||
This image shows how the window origin has changed between the top frame and the selected secondary frame.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="collapsible">
|
||||
<h2 id="using-the-console-api">Using the Console API</h2>
|
||||
<p>
|
||||
The Console API is collection of methods provided by the global `console` object defined by DevTools.
|
||||
One of the API's main purposes is to log information to the console while your application is running.
|
||||
You can also group output visually in the console to reduce visual clutter.
|
||||
</p>
|
||||
|
||||
<section>
|
||||
<h3 id="writing-to-the-console">Writing to the console</h3>
|
||||
<p>
|
||||
The <a href="console-api#consolelogobject-object">console.log()</a> method takes one or more expressions as parameters and writes their current values to the console.
|
||||
</p>
|
||||
|
||||
<figure id="simple-console-write">
|
||||
<figcaption>A simple write to the console.</figcaption>
|
||||
<figure>
|
||||
<pre class="prettyprint"><code class="language-javascript">var a = document.createElement('p');
|
||||
a.appendChild(document.createTextNode('foo'));
|
||||
a.appendChild(document.createTextNode('bar'));
|
||||
console.log("Node count: " + a.childNodes.length);
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/log-basic.png" alt="Basic log" />
|
||||
<figcaption>
|
||||
Display of the example code in the console.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Multiple parameters will concatenate into a space-delimited line.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption><code>console.log()</code> with multiple parameters</figcaption>
|
||||
<figure>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/log-multiple.png" alt="Log Multiple"/>
|
||||
<figcaption>
|
||||
Output of multiple parameter <code>console.log()</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="errors-and-warnings">Errors and Warnings</h3>
|
||||
<p>
|
||||
Errors and warnings act the same way as normal logging.
|
||||
The difference is <code>error()</code> and <code>warn()</code> have styles to bring attention to them.
|
||||
The <code><a href="console-api#consoleerrorobject-object">console.error()</a></code> method displays a red icon along with red message text.
|
||||
The <code><a href="console-api#consolewarnobject-object">console.warn()</a></code> method displays a yellow warning icon with the message text.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>Using console warn and error methods.</figcaption>
|
||||
<figure>
|
||||
<figcaption>Using the <code>error()</code> method.</figcaption>
|
||||
<figure>
|
||||
<pre class="prettyprint"><code class="language-javascript">function connectToServer() {
|
||||
console.error("Error: %s (%i)", "Server is not responding",500);
|
||||
}
|
||||
connectToServer();
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/error-server-not-resp.png" alt="Error example output"/>
|
||||
<figcaption>
|
||||
How <code>connectToServer()</code> displays in the console.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<figcaption>Using the <code>warn()</code> method.</figcaption>
|
||||
<figure>
|
||||
<pre class="prettyprint"><code class="language-javascript">if(a.childNodes.length < 3 ) {
|
||||
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
|
||||
}
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/warning-too-few-nodes.png" alt="Warn example" />
|
||||
<figcaption>
|
||||
Example warning output.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="assertions">Assertions</h3>
|
||||
<p>
|
||||
The <code><a href="console-api#consoleassertexpression-object">console.assert()</a></code> method conditionally displays an error string (its second parameter) only if its first parameter evaluates to <samp>false</samp>.
|
||||
</p>
|
||||
<figure>
|
||||
<figcaption>A simple assertion and how it displays.</figcaption>
|
||||
<figure>
|
||||
<figcaption>The following code will cause an error message in the console only if the number of child nodes belonging to the <code>list</code> element is greater than 500.</figcaption>
|
||||
<figure>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.assert(list.childNodes.length < 500, "Node count is > 500");</code></pre>
|
||||
</figure>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/assert-failed.png" alt="Assertion failed" />
|
||||
<figcaption>
|
||||
How an assertion failure displays in the console.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="filtering-console-output">Filtering console output</h3>
|
||||
<p>
|
||||
You can filter console output by its severity level by selecting one of the filter options.
|
||||
Activate filters under the filter funnel icon located in the upper-left corner of the console panel.
|
||||
The following filter options are available:
|
||||
</p>
|
||||
|
||||
<dl>
|
||||
<dt>All</dt>
|
||||
<dd>Shows all console output.</dd>
|
||||
|
||||
<dt>Errors</dt>
|
||||
<dd>Only show output from <code>console.error()</code>.</dd>
|
||||
|
||||
<dt>Warnings</dt>
|
||||
<dd>Only show output from <code>console.warn()</code>.</dd>
|
||||
|
||||
<dt>Info</dt>
|
||||
<dd>Only show output from <code>console.info()</code>.
|
||||
|
||||
<dt>Logs</dt>
|
||||
<dd>Only show output from <code>console.log()</code>.</dd>
|
||||
|
||||
<dt>Debug</dt>
|
||||
<dd>Only show output from <code>console.timeEnd()</code> and <code>console.debug()</code>.</dd>
|
||||
</dl>
|
||||
|
||||
<figure>
|
||||
<img src="console-files/filter-errors.png" alt="Filtering errors" />
|
||||
<figcaption>
|
||||
Filter enabled for showing only errors.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="grouping-output">Grouping Output</h3>
|
||||
<p>
|
||||
You can group related output together with the group commands.
|
||||
The <code><a href="console-api#consolegroupobject-object">group</a></code> command takes a single string parameter to set the name of the group.
|
||||
The console will begin to group all subsequent output together.
|
||||
To end the grouping you only need to call <code><a href="console-api#consolegroupend">groupEnd()</a></code>.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>Simple grouping example</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">var user = "jsmith", authenticated = false;
|
||||
console.group("Authentication phase");
|
||||
console.log("Authenticating user '%s'", user);
|
||||
// authentication code here...
|
||||
if (!authenticated) {
|
||||
console.log("User '%s' not authenticated.", user)
|
||||
}
|
||||
console.groupEnd();
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Example output</figcaption>
|
||||
<img src="console-files/group.png" alt="Simple console group output" />
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
Log groups may also nest within each other.
|
||||
This is useful to see a large group in smaller pieces at a time.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
This example shows a log group for the authentication phase of a login process.
|
||||
</figcaption>
|
||||
<figure>
|
||||
<figcaption>The code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">var user = "jsmith", authenticated = true, authorized = true;
|
||||
// Top-level group
|
||||
console.group("Authenticating user '%s'", user);
|
||||
if (authenticated) {
|
||||
console.log("User '%s' was authenticated", user);
|
||||
// Start nested group
|
||||
console.group("Authorizing user '%s'", user);
|
||||
if (authorized) {
|
||||
console.log("User '%s' was authorized.", user);
|
||||
}
|
||||
// End nested group
|
||||
console.groupEnd();
|
||||
}
|
||||
// End top-level group
|
||||
console.groupEnd();
|
||||
console.log("A group-less log trace.");
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/nestedgroup.png" alt="Nested console group output"/>
|
||||
<figcaption>
|
||||
Nested groups output in the console.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
When you are using groups heavily it can be very useful to not see everything as it happens.
|
||||
For these times you can automatically collapse groups by calling <code><a href="console-api#consolegroupcollapsed">groupCollapsed()</a></code> instead of <code>group()</code>.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>console.groupCollapsed() usage</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.groupCollapsed("Authenticating user '%s'", user);
|
||||
if (authenticated) {
|
||||
...
|
||||
}
|
||||
console.groupEnd();
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/groupcollapsed.png" alt="Initially collapsed group" />
|
||||
<figcaption>
|
||||
<code>groupCollapsed()</code> output.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="viewing-structured-data">Viewing structured data</h3>
|
||||
|
||||
<p>
|
||||
The <code>table()</code> method provides an easy way to view similar data objects.
|
||||
This will take the properties of an object and create a header.
|
||||
Row data comes from each indexes properties value.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
A table in the console using two arrays.
|
||||
</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
|
||||
console.table([[1,2,3], [2,3,4]]);
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>The output of the example code.</figcaption>
|
||||
<img src="console-files/table-arrays.png" alt="console table display">
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
The second parameter to <code>table()</code> is optional.
|
||||
You may define an array containing the property strings you wish to display.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
A console table using a collection of objects.
|
||||
</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">
|
||||
function Person(firstName, lastName, age) {
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
this.age = age;
|
||||
}
|
||||
|
||||
var family = {};
|
||||
family.mother = new Person("Susan", "Doyle", 32);
|
||||
family.father = new Person("John", "Doyle", 33);
|
||||
family.daughter = new Person("Lily", "Doyle", 5);
|
||||
family.son = new Person("Mike", "Doyle", 8);
|
||||
|
||||
console.table(family, ["firstName", "lastName", "age"]);
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>The output of the example code.</figcaption>
|
||||
<img src="console-files/table-people-objects.png" alt="console output with table objects">
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="string-substitution-and-formatting">String substitution and formatting</h3>
|
||||
|
||||
<p>
|
||||
The first parameter passed to any of the logging methods may contain one or more <i>format specifiers</i>.
|
||||
A format specifier consists of a <code>%</code> symbol followed by a letter that indicates the formatting that applies to the value.
|
||||
The parameters following the string apply to the placeholders in order.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
The following example uses the string and digit formatters to insert values into the output string.
|
||||
You will see <samp>Sam has 100 points</samp> in the console.
|
||||
</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.log("%s has %d points", "Sam", 100);</code></pre>
|
||||
</figure>
|
||||
|
||||
<p>The full list of format specifiers are as follows:</p>
|
||||
|
||||
<dl>
|
||||
<dt><code>%s</code></dt>
|
||||
<dd>Formats the value as a string</dd>
|
||||
|
||||
<dt><code>%d</code></dt>
|
||||
<dt><code>%i</code></dt>
|
||||
<dd>Formats the value as an integer.</dd>
|
||||
|
||||
<dt><code>%f</code></dt>
|
||||
<dd>Formats the value as a floating point value.</dd>
|
||||
|
||||
<dt><code>%o</code></dt>
|
||||
<dd>Formats the value as an expandable DOM element. As seen in the Elements panel.</dd>
|
||||
|
||||
<dt><code>%O</code></dt>
|
||||
<dd>Formats the value as an expandable JavaScript object.</dd>
|
||||
|
||||
<dt><code>%c</code></dt>
|
||||
<dd>Applies CSS style rules to the output string as specified by the second parameter.</dd>
|
||||
</dl>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
This example uses the digit specifier to format the value of <code>document.childNodes.length</code>.
|
||||
It also uses the floating point specifier to format the value of <code>Date.now()</code>.
|
||||
</figcaption>
|
||||
<figure>
|
||||
<figcaption>The code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img class="console-files/format-substitution.png" alt="Example subsitution output" />
|
||||
<figcaption>
|
||||
The output of the previous code sample.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="formatting-dom-elements-as-javascript-objects">Formatting DOM elements as JavaScript objects</h3>
|
||||
|
||||
<p>
|
||||
When you log a DOM element to the console it displays in an XML format.
|
||||
This is the same view as the Elements panel.
|
||||
To display the JavaScript representation you may either use the <code>dir()</code> method or the object format specifier in a <code>log()</code> statement.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>The different views for logging an element.</figcaption>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><code>log()</code> view</th>
|
||||
<th><code>dir()</code> view</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><img src="console-files/log-element.png" alt="Element logged" /></td>
|
||||
<td><img src="console-files/dir-element.png" alt="Element logged using dir()" /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="styling-console-output-with-css">Styling console output with CSS</h3>
|
||||
<p>
|
||||
The CSS format specifier allows you to customize the display in the console.
|
||||
Start the string with the specifier and give the style you wish to apply as the second parameter.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>Styling log information</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/format-string.png" alt="Formatted string" />
|
||||
<figcaption>Example code output.</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="measuring-how-long-something-takes">Measuring how long something takes</h3>
|
||||
<p>
|
||||
A timer starts by calling the <code><a href="console-api#consoletimelabel">time()</a></code> method.
|
||||
You must pass a string to the method to identify the time marker.
|
||||
When you want to end the measurement call <code><a href="console-api#consoletimeendlabel">timeEnd()</a></code> and pass it the same string passed to the initializer.
|
||||
The console logs the label and time elapsed when the <code>timeEnd()</code> method fires.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>Example code and output for timing JavaScript execution.</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example Code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">console.time("Array initialize");
|
||||
var array= new Array(1000000);
|
||||
for (var i = array.length - 1; i >= 0; i--) {
|
||||
array[i] = new Object();
|
||||
};
|
||||
console.timeEnd("Array initialize");
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Output in the console:</figcaption>
|
||||
<img src="console-files/time-duration.png" alt="Time elapsed" />
|
||||
</figure>
|
||||
</figure>
|
||||
|
||||
<p>
|
||||
When a <a href="timeline">Timeline</a> recording is taking place during a <code>time()</code> operation it will annotate the timeline as well.
|
||||
This is useful when tracing what your application does and where it comes from.
|
||||
</p>
|
||||
<figure>
|
||||
<img src="console-files/time-annotation-on-timeline.png" alt="Time annotation on timeline">
|
||||
<figcaption>
|
||||
How an annotation on the timeline looks from <code>time()</code>.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="marking-the-timeline">Marking the Timeline</h3>
|
||||
<p>
|
||||
The <a href="timeline">Timeline panel</a> provides a complete overview of where the engine spends time.
|
||||
You can add a mark to the timeline from the console with the <code><a href="console-api#consoletimestamplabel">timeStamp()</a></code>.
|
||||
This is a simple way to correlate events in your application with other events.
|
||||
</p>
|
||||
|
||||
<p class="note"><b>Note:</b> The <code>timeStamp()</code> method only functions while a Timeline recording is in progress.</p>
|
||||
|
||||
<p>
|
||||
The <code>timeStamp()</code> annotates the Timeline in the following places:
|
||||
</p>
|
||||
<ul>
|
||||
<li>A yellow vertical line in the Timeline's summary and details view.</li>
|
||||
<li>It adds a record to the list of events.</li>
|
||||
</ul>
|
||||
|
||||
<figure>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">function AddResult(name, result) {
|
||||
console.timeStamp("Adding result");
|
||||
var text = name + ': ' + result;
|
||||
var results = document.getElementById("results");
|
||||
results.innerHTML += (text + "<br>");
|
||||
}
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<img src="console-files/timestamp2.png" alt="timestamps in the timeline" />
|
||||
<figcaption>
|
||||
Timestamps in the timeline.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="setting-breakpoints-in-javascript">Setting breakpoints in JavaScript</h3>
|
||||
<p>
|
||||
The <code><a href="console-api#debugger">debugger;</a></code> statement will begin a debugging session.
|
||||
This is equivalent to setting a breakpoint at this line in the script.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>Calling <code>brightness()</code> begins the debug session.</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettify"><code class="language-javascript">brightness : function() {
|
||||
debugger;
|
||||
var r = Math.floor(this.red*255);
|
||||
var g = Math.floor(this.green*255);
|
||||
var b = Math.floor(this.blue*255);
|
||||
return (r * 77 + g * 150 + b * 29) >> 8;
|
||||
}
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Example output:</figcaption>
|
||||
<img src="console-files/debugger.png" alt="Debugger activated" />
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="counting-statement-execution">Counting statement executions</h3>
|
||||
|
||||
<p>
|
||||
The <code>count()</code> method will log the provided string along with the number of times the same string has been provided.
|
||||
The string may have dynamic content.
|
||||
When the exact statement is given to <code>count()</code> on the same line the number will increment.
|
||||
</p>
|
||||
|
||||
<figure>
|
||||
<figcaption>
|
||||
An example <code>count()</code> with some dynamic content.
|
||||
</figcaption>
|
||||
<figure>
|
||||
<figcaption>Example code:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">function login(user) {
|
||||
console.count("Login called for user " + user);
|
||||
}
|
||||
|
||||
users = [ // by last name since we have too many Pauls.
|
||||
'Irish',
|
||||
'Bakaus',
|
||||
'Kinlan'
|
||||
];
|
||||
|
||||
users.forEach(function(element, index, array) {
|
||||
login(element);
|
||||
});
|
||||
|
||||
login(users[0]);
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Output of the code sample:</figcaption>
|
||||
<img src="console-files/console-count.png" alt="console count example output">
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="collapsible">
|
||||
<h2 id="using-the-command-line-api">Using the Command Line API</h2>
|
||||
<p>
|
||||
The console is more powerful than a simple log output directory.
|
||||
It also is a full terminal prompt in the scope of the current web page.
|
||||
The <a href="commandline-api">Command Line API</a> offers the following features:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Convenience functions for selecting DOM elements</li>
|
||||
<li>Methods for controlling the CPU profiler</li>
|
||||
<li>Aliases for a number of Console API methods</li>
|
||||
<li>Monitoring events</li>
|
||||
<li>View event listeners registered on objects</li>
|
||||
</ul>
|
||||
|
||||
<section>
|
||||
<h3 id="evaluating-expressions">Evaluating expressions</h3>
|
||||
<p>
|
||||
The console will evaluate any JavaScript expression you provide when pressing <kbd class="kbd">Enter</kbd>.
|
||||
It provides auto-completion and tab-completion.
|
||||
As you type an expression property name suggestions appear.
|
||||
If there are multiple matches <kbd class="kbd">↑</kbd> and <kbd class="kbd">↓</kbd> will cycle through them.
|
||||
Pressing <kbd class="kbd">→</kbd> will select the current suggestion.
|
||||
For a single suggestion <kbd class="kbd">Tab</kbd> will also select the suggestion.
|
||||
</p>
|
||||
<figure>
|
||||
<img alt="Simple expressions in the console." src="console-files/evaluate-expressions.png">
|
||||
<figcaption>
|
||||
Some simple expressions in the console.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="selecting-elements">Selecting Elements</h3>
|
||||
<p>
|
||||
There are a few shortcuts for selecting elements.
|
||||
These save you valuable time when compared to typing out their standard counterparts.
|
||||
</p>
|
||||
|
||||
<dl>
|
||||
<dt><code><a href="commandline-api#selector">$()</a></code></dt>
|
||||
<dd>
|
||||
Returns the first element that matches the specified CSS selector.
|
||||
It is a shortcut for <code><a href="http://docs.webplatform.org/wiki/css/selectors_api/querySelector">document.querySelector()</a></code>.
|
||||
</dd>
|
||||
|
||||
<dt><code><a href="commandline-api#selector-1">$$()</a></code></dt>
|
||||
<dd>
|
||||
Returns an array of all the elements that match the specified CSS selector.
|
||||
This is an alias for <code><a href="http://docs.webplatform.org/wiki/css/selectors_api/querySelectorAll">document.querySelectorAll()</a></code>
|
||||
</dd>
|
||||
|
||||
<dt><code><a href="commandline-api#xpath">$x()</a></code></dt>
|
||||
<dd>
|
||||
Returns an array of elements that match the specified <a href="http://en.wikipedia.org/wiki/XPath">XPath</a>.
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<figure>
|
||||
<figcaption>Examples of target selection:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">$('code') // Returns the first code element in the document.
|
||||
$$('figure') // Returns an array of all figure elements in the document.
|
||||
$x('html/body/p') // Returns an array of all paragraphs in the document body.
|
||||
</code></pre>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="inspecting-dom-elements-and-javascript-heap-objects">Inspecting DOM elements and JavaScript heap objects</h3>
|
||||
<p>
|
||||
The <code><a href="commandline-api#inspectobject">inspect()</a></code> function takes a DOM element or JavaScript reference as a parameter.
|
||||
If you provide a DOM element the DevTools will go to the Elements panel and display that element.
|
||||
If you provide a JavaScript reference then it will go to the Profile panel.
|
||||
</p>
|
||||
<figure data-target="inspecting-dom-elements-example">
|
||||
<figcaption>
|
||||
When this code executes in your console on this page, it will grab this figure and display it on the Elements panel.
|
||||
This takes advantage of the <code<a href="commandline-api#_">$_</a></code> property to get the output of the last evaluated expression.
|
||||
</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">$('[data-target="inspecting-dom-elements-example"]')
|
||||
inspect($_)
|
||||
</code></pre>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="accessing-recently-selected-elements-and-objects">Accessing recently selected elements and objects</h3>
|
||||
<p>
|
||||
The console stores the last five element and object selections.
|
||||
As you select an element in the Elements panel or an object in the Profiles panel, that pushes onto the history stack.
|
||||
<code><a href="commandline-api#0-4">$<var>x</var></a></code> provides access to the history stack.
|
||||
Remember computers begin counting from 0; this means the latest item is <code>$0</code> and the oldest item is <code>$4</code>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="monitoring-events">Monitoring events</h3>
|
||||
<p>
|
||||
The <code><a href="commandline-api#monitoreventsobject-events">monitorEvents()</a></code> method instructs the DevTools to log information on the specified targets.
|
||||
The first parameter is the object to monitor.
|
||||
All events return if the second parameter is not provided.
|
||||
To specify the events to listen to you may pass either a string or an array of strings as the second parameter.
|
||||
</p>
|
||||
<figure>
|
||||
<figcaption>Listen to click events on the body of the page.</figcaption>
|
||||
<pre class="prettify"><code class="language-javascript">monitorEvents(document.body, "click");</code></pre>
|
||||
</figure>
|
||||
<p>
|
||||
If a supported <i>event type</i> that the DevTools maps to a set of standard event names then it will listen to the events for that type.
|
||||
The <a href="commandline-api#monitoreventsobject-events">Command Line API</a> has a full mapping of <i>event types</i> to the events they cover.
|
||||
</p>
|
||||
<p>
|
||||
To stop monitoring events you call the <code>unmonitorEvents()</code> method and give it the object to stop monitoring.
|
||||
</p>
|
||||
<figure>
|
||||
<figcaption>
|
||||
Stop listening to events on the <var>body</var> object.
|
||||
</figcaption>
|
||||
<pre class="prettify"><code class="language-javascript">unmonitorEvents(document.body);</code></pre>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="controlling-the-cpu-profiler">Controlling the CPU Profiler</h3>
|
||||
<p>
|
||||
The <code>profile()</code> function begins a JavaScript CPU profile.
|
||||
You may pass in a string to name the profile as well.
|
||||
To stop a profile call <code>profileEnd()</code> in the same way you called the initializer.
|
||||
</p>
|
||||
<figure>
|
||||
<figure>
|
||||
<figcaption>
|
||||
Create a new profile without providing a name.
|
||||
</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">profile()
|
||||
profileEnd()
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Example profile</figcaption>
|
||||
<img alt="Profile panel" src="commandline-api-files/profile-panel.png">
|
||||
</figure>
|
||||
</figure>
|
||||
<p>
|
||||
If you provide a label that is the heading.
|
||||
Profiles group together if you create multiple profiles with the same label.
|
||||
</p>
|
||||
<figure>
|
||||
<figure>
|
||||
<figcaption>
|
||||
Example code:
|
||||
</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">profile("init")
|
||||
profileEnd("init")
|
||||
profile("init")
|
||||
profileEnd("init")
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Result in the profiles panel:</figcaption>
|
||||
<img alt="Grouped profiles created by the example code." src="commandline-api-files/profile-panel-2.png">
|
||||
</figure>
|
||||
</figure>
|
||||
<p>
|
||||
Multiple CPU profiles can operate at once.
|
||||
You also are not required to close them out in creation order.
|
||||
</p>
|
||||
<figure>
|
||||
<figure>
|
||||
<figcaption>Nested profiles closed in same order:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">profile("A")
|
||||
profile("B")
|
||||
profileEnd("A")
|
||||
profileEnd("B")
|
||||
</code></pre>
|
||||
</figure>
|
||||
<figure>
|
||||
<figcaption>Nested profiles closed in alternate order:</figcaption>
|
||||
<pre class="prettyprint"><code class="language-javascript">profile("A")
|
||||
profile("B")
|
||||
profileEnd("B")
|
||||
profileEnd("A")
|
||||
</code></pre>
|
||||
</figure>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="collapsible">
|
||||
<section>
|
||||
<h2 id="settings">Settings</h2>
|
||||
<p>
|
||||
The Console has four settings you can modify in the general tab of the DevTools settings dialog:
|
||||
</p>
|
||||
<dl>
|
||||
<dt>Hide network messages</dt>
|
||||
<dd>Instructs the console to not show logs from network issues. For example, 404 and 500 series errors will not be logged.</dd>
|
||||
|
||||
<dt>Log XMLHttpRequests</dt>
|
||||
<dd>Determines if the console logs each XMLHttpRequest.</dd>
|
||||
|
||||
<dt>Preserve log upon navigation</dt>
|
||||
<dd>Determines if the console history is not deleted when you navigate to another page.</dd>
|
||||
|
||||
<dt>Show timestamps</dt>
|
||||
<dd>When a statement is made to the console this will display the timestamp for the call. This will disable <a href="#message-stacking">message stacking</a>.</dd>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="collapsible">
|
||||
<h2 id="summary">Summary</h2>
|
||||
<p>
|
||||
The Chrome DevTools provides a robust console.
|
||||
You should now understand how to begin using this to store information and grab elements.
|
||||
This functionality is still scratching the surface of possibilities.
|
||||
The web is your playground and these are your building blocks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{{/partials.standard_devtools_article}}
|
||||
391
docs/console.md
391
docs/console.md
|
|
@ -1,391 +0,0 @@
|
|||
{{+bindTo:partials.standard_devtools_article}}
|
||||
|
||||
# Using the Console
|
||||
|
||||
The JavaScript Console provides two primary functions for developers testing web pages and applications:
|
||||
|
||||
* A place to log diagnostic information using methods provided by the [Console API](console-api.md), such as [console.log()](console-api.md#consolelogobject-object), or [console.profile()](console-api.md#consoleprofilelabel).
|
||||
* A shell prompt where you can enter commands and interact with the document and the Chrome DevTools. You can evaluate expressions directly in the Console, and can also use the methods provided by the [Command Line API](commandline-api.md), such as [$()](commandline-api.md#selector) command for selecting elements, or [profile()](commandline-api.md#profilename) to start the CPU profiler.
|
||||
|
||||
This documentation provides an overview and common uses of these two APIs. You can also browse the [Console API](console-api.md) and [Command Line API](commandline-api.md) reference guides.
|
||||
|
||||
|
||||
|
||||
## Basic operation
|
||||
|
||||
### Opening the Console
|
||||
|
||||
The JavaScript Console is available in two modes within Chrome DevTools: the primary Console tab, or as a split-view you can display while on another tab (such as Elements or Sources).
|
||||
|
||||
To open the Console tab, do one of the following:
|
||||
|
||||
* Use the keyboard shortcut **Command - Option - J** (Mac) or **Control -Shift -J** (Windows/Linux).
|
||||
* Select **View > Developer > JavaScript Console**.
|
||||
|
||||
|
||||
|
||||
To toggle a split-view of the Console on another tab, press the **Esc** key on your keyboard, or click the **Show/Hide Console** button in the bottom left corner of the Chrome DevTools window. In the following screenshot the Console split-view is shown with the Elements panel.
|
||||
|
||||
|
||||
|
||||
### Clearing the console history
|
||||
|
||||
To clear the console's history, do one of the following:
|
||||
|
||||
* Right-click or Ctrl-click anywhere in the Console and choose **Clear Console** from the context menu that appears.
|
||||
* Enter the [**clear()**](commandline-api.md#clear) Command Line API at the shell prompt.
|
||||
* Invoke [**console.clear()**](console-api.md#consoleclear) Console API from JavaScript.
|
||||
* Use the keyboard shortcut **⌘K** or **⌃L** (Mac) **Control - L** (Windows and Linux).
|
||||
|
||||
By default, the console history is cleared when you navigate to another page. You can change this behavior by enabling **Preserve log upon navigation** in the Console area of the Settings dialog (see [Console preferences](#consolepreferences)).
|
||||
|
||||
### Console settings
|
||||
|
||||
The Console has two global settings you can modify in the General tab of the DevTools Settings dialog:
|
||||
|
||||
* **Log XMLHTTPRequests**—determines if each XMLHTTPRequest is logged to the Console panel.
|
||||
* **Preserve log upon navigation**—determines if console history for the current page is preserved when you navigate to another page. By default, both of these settings are disabled.
|
||||
|
||||
You can also change these settings by right-clicking anywhere in the Console to bring up the context menu.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Using the Console API
|
||||
|
||||
The Console API is collection of methods provided by the global `console` object defined by DevTools. One of the API's main purposes is to [log information](#writing-to-the-console) (such as a property value, or an entire objects or DOM element) to the console while your application is running. You can also group output visually in the console to reduce visual clutter.
|
||||
|
||||
### Writing to the console
|
||||
|
||||
The [console.log()](console-api.md#consolelogobject-object) method takes one or more expressions as parameters and writes their current values to the console. For example:
|
||||
|
||||
var a = document.createElement('p');
|
||||
a.appendChild(document.createTextNode('foo'));
|
||||
a.appendChild(document.createTextNode('bar'));
|
||||
console.log("Node count: " + a.childNodes.length);
|
||||
|
||||
|
||||
|
||||
Instead of concatenating expressions together with the "+" operator (as shown above), you can put each in its own method parameter and they will be joined together in a space-delimited line.
|
||||
|
||||
console.log("Node count:", a.childNodes.length, "and the current time is:", Date.now());
|
||||
|
||||
|
||||
|
||||
### Errors and warnings
|
||||
|
||||
The [`console.error()`](console-api.md#consoleerrorobject-object) method displays a red icon along with the message text, which is colored red.
|
||||
|
||||
function connectToServer() {
|
||||
console.error("Error: %s (%i)", "Server is not responding",500);
|
||||
}
|
||||
connectToServer();
|
||||
|
||||
|
||||
|
||||
The [`console.warn()`](console-api.md#consolewarnobject-object) method displays a yellow warning icon with the message text.
|
||||
|
||||
if(a.childNodes.length < 3 ) {
|
||||
console.warn('Warning! Too few nodes (%d)', a.childNodes.length);
|
||||
}
|
||||
|
||||
|
||||
|
||||
### Assertions
|
||||
|
||||
The [`console.assert()`](console-api.md#consoleassertexpression-object) method conditionally displays an error string (its second parameter) only if its first parameter evaluates to `false`. For instance, in the following example an error message is written to the console only if the number of child nodes belonging to the `list` element is greater than 500.
|
||||
|
||||
console.assert(list.childNodes.length < 500, "Node count is > 500");
|
||||
|
||||
|
||||
|
||||
### Filtering console output ###
|
||||
|
||||
You can quickly filter console output by its severity level--errors, warning, or standard log statements--by selecting one of the filter options. Click on the filter funnel (as shown below) and then select which filter you want to use.
|
||||
|
||||
|
||||
|
||||
Filter options:
|
||||
|
||||
* **All**—Shows all console output.
|
||||
* **Errors**—Only show output from `console.error()`
|
||||
* **Warnings**—Only show output from `console.warn()`
|
||||
* **Logs**—Only show output from `console.log()`, `console.info()` and `console.debug()`.
|
||||
* **Debug**—Only show output from `console.timeEnd()` and other console output.
|
||||
|
||||
### Grouping output
|
||||
|
||||
You can visually group related console output statements together in the console with the [`console.group()`](console-api.md#consolegroupobject-object) and [`groupEnd()`](console-api.md#consolegroupend) commands.
|
||||
|
||||
<pre class="prettyprint">
|
||||
var user = "jsmith", authenticated = false; <br>
|
||||
console.group("Authentication phase"); <br>
|
||||
console.log("Authenticating user '%s'", user); <br>
|
||||
// authentication code here... <br>
|
||||
if (!authenticated) { <br>
|
||||
console.log("User '%s' not authenticated.", user) <br>
|
||||
} <br>
|
||||
console.groupEnd(); <br>
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
You can also nest logging groups. In the following example a logging group is created for the authentication phase of a login process. If the user is authenticated, a nested group is created for the authorization phase.
|
||||
|
||||
<pre class="prettyprint">
|
||||
var user = "jsmith", authenticated = true, authorized = true; <br>
|
||||
// Top-level group <br>
|
||||
console.group("Authenticating user '%s'", user); <br>
|
||||
if (authenticated) { <br>
|
||||
console.log("User '%s' was authenticated", user); <br>
|
||||
// Start nested group <br>
|
||||
console.group("Authorizing user '%s'", user); <br>
|
||||
if (authorized) { <br>
|
||||
console.log("User '%s' was authorized.", user); <br>
|
||||
} <br>
|
||||
// End nested group <br>
|
||||
console.groupEnd(); <br>
|
||||
} <br>
|
||||
// End top-level group <br>
|
||||
console.groupEnd(); <br>
|
||||
console.log("A group-less log trace."); <br>
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
|
||||
To create a group that is initially collapsed, use [`console.groupCollapsed()`](console-api.md#consolegroupcollapsed) instead of `console.group()`, as shown below:
|
||||
|
||||
console.groupCollapsed("Authenticating user '%s'", user);
|
||||
if (authenticated) {
|
||||
...
|
||||
}
|
||||
|
||||
|
||||
|
||||
### String substitution and formatting
|
||||
|
||||
The first parameter you pass to any of the console's logging methods (`log()` or `error()`, for example) may contain one or more _format specifiers_. A format specifier consists of a **`%`** symbol followed by a letter that indicates the formatting that should be applied to the inserted value (`%s` for strings, for example). The format specifier identifies where to substitute a value provided by a subsequent parameter value.
|
||||
|
||||
The following example using the `%s` (string) and `%d` (integer) formatters to insert values into the output string.
|
||||
|
||||
console.log("%s has %d points", "Sam", "100");
|
||||
|
||||
This would result in "Sam has 100 points" being logged to the console.
|
||||
|
||||
The following table lists the supported format specifiers and the formatting they apply:
|
||||
|
||||
|Format specifier|Description
|
||||
-----------------|---------------
|
||||
`%s` | Formats the value as a string.
|
||||
`%d` or `%i` | Formats the value as an integer.
|
||||
`%f` | Formats the object as a floating point value.
|
||||
`%o` | Formats the value as an expandable DOM element (as in the Elements panel).
|
||||
`%O` | Formats the value as an expandable JavaScript object.
|
||||
`%c` | Applies CSS style rules to output string specified by the second parameter.
|
||||
|
||||
In the following example the `%d` format specifier is substituted with the value of `document.childNodes.length` and formatted as an integer; the `%f` format specifier is substituted with the value returned by `Date.now()`, which is formatted as a floating point number.
|
||||
|
||||
console.log("Node count: %d, and the time is %f.", document.childNodes.length, Date.now());
|
||||
|
||||
|
||||
|
||||
### Formatting DOM elements as JavaScript objects
|
||||
|
||||
By default, when you log a DOM element to the console it's displayed in an XML format, as in the Elements panel:
|
||||
|
||||
console.log(document.body.firstElementChild)
|
||||
|
||||
|
||||
|
||||
You can also log an element's JavaScript representation with the `console.dir()` method:
|
||||
|
||||
console.dir(document.body.firstElementChild);
|
||||
|
||||
|
||||
|
||||
Equivalently, you can us the `%O` [format specifier](#string-substitution-and-formatting) with `console.log()`:
|
||||
|
||||
console.log("%O", document.body.firstElementChild);
|
||||
|
||||
### Styling console output with CSS ###
|
||||
|
||||
You use the `%c` format specifier to apply custom CSS rules to any string you write to the Console with [`console.log()`](#writingtotheconsole) or related methods.
|
||||
|
||||
console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
|
||||
|
||||
|
||||
|
||||
### Measuring how long something takes
|
||||
|
||||
You can use the [`console.time()`](console-api.md#consoletimelabel) and [`console.timeEnd()`](console-api.md#consoletimeendlabel) methods to measure how long a function or operation in your code takes to complete. You call `console.time()` at the point in your code where you want to start the timer and `console.timeEnd()` to stop the timer. The elapsed time between these two calls is displayed in the console.
|
||||
|
||||
console.time("Array initialize");
|
||||
var array= new Array(1000000);
|
||||
for (var i = array.length - 1; i >= 0; i--) {
|
||||
array[i] = new Object();
|
||||
};
|
||||
console.timeEnd("Array initialize");
|
||||
|
||||
|
||||
|
||||
Note: You must pass the same string to `console.time()` and `timeEnd()` for the timer to finish as expected.
|
||||
|
||||
### Marking the Timeline
|
||||
|
||||
The [Timeline panel](timeline.md) gives you a complete overview of where time is spent when loading and using your web app or page. The [`console.timeStamp()`](console-api.md#consoletimestamplabel) method marks the Timeline at the moment it was executed. This provides an easy way to correlate events in your application with other browser-related events, such as layout or paints.
|
||||
|
||||
Note: The `console.timeStamp()` method only functions while a Timeline recording is in progress.
|
||||
|
||||
In the following example the Timeline is marked when the application enters the `AddResult()` function's implementation.
|
||||
|
||||
function AddResult(name, result) {
|
||||
console.timeStamp("Adding result");
|
||||
var text = name + ': ' + result;
|
||||
var results = document.getElementById("results");
|
||||
results.innerHTML += (text + "<br>");
|
||||
}
|
||||
|
||||
As shown in the following screenshot, the `timeStamp()` command annotates the Timeline in the following places:
|
||||
|
||||
* A yellow vertical line in the Timeline's summary and detail views.
|
||||
* A record is added to the list of recorded events.
|
||||
|
||||
|
||||
|
||||
### Setting breakpoints in JavaScript ###
|
||||
|
||||
You can start a debugging session from your JavaScript code by calling the [`debugger`](console-api.md#debugger) command. For instance, in the following example the JavaScript debugger is opened when an object's `brightness()` function is invoked:
|
||||
|
||||
brightness : function() {
|
||||
debugger;
|
||||
var r = Math.floor(this.red*255);
|
||||
var g = Math.floor(this.green*255);
|
||||
var b = Math.floor(this.blue*255);
|
||||
return (r * 77 + g * 150 + b * 29) >> 8;
|
||||
}
|
||||
|
||||
|
||||
|
||||
<aside class="special">
|
||||
An interesting technique of using conditional breakpoints was explored by Brian Arnold in <a href="http://www.randomthink.net/blog/2012/11/breakpoint-actions-in-javascript/">Breakpoint Actions in JavaScript</a>.
|
||||
</aside>
|
||||
|
||||
|
||||
|
||||
## Using the Command Line API
|
||||
|
||||
In addition to being a place where you can log information from your application, the Console is also a shell prompt where you can directly evaluate expressions or issue commands provided by the [Command Line API](commandline-api.md). This API provides the following features:
|
||||
|
||||
* Convenience functions for selecting DOM elements
|
||||
* Methods for controlling the CPU profiler
|
||||
* Aliases for a number of Console API methods
|
||||
* Monitoring events
|
||||
* View event listeners registered on objects
|
||||
|
||||
### Evaluating expressions ###
|
||||
|
||||
The Console attempts to evaluate any JavaScript expression you enter at the shell prompt, upon pressing the Return or Enter key. The Console provides auto-completion and tab-completion. As you type expressions, property names are automatically suggested. If there are multiple properties with the same prefix, pressing the Tab key cycles through them. Pressing the right arrow key accepts the current suggestion. The current suggestion is also accepted by pressing the Tab key if there is only one matched property.
|
||||
|
||||
|
||||
|
||||
To enter a multi-line expression at the shell prompt (such as a function definition) press Shift+Enter between lines.
|
||||
|
||||
|
||||
|
||||
### Selecting elements
|
||||
|
||||
The Command Line API provides several methods to access DOM elements in your application. For example, the [**`$()`**](commandline-api.md#selector) method returns the first element that matches the specified CSS selector, just like [`document.querySelector()`](http://docs.webplatform.org/wiki/css/selectors_api/querySelector). For instance, the following code returns the element with the ID "loginBtn".
|
||||
|
||||
$('#loginBtn');
|
||||
|
||||
|
||||
|
||||
The [**`$$()`**](commandline-api.md#selector-1) command returns an array of all the elements that match the specified CSS selector, just like [`document.querySelectorAll()`](http://docs.webplatform.org/wiki/css/selectors_api/querySelectorAll). For instance, the following displays selects all `<button>` elements with the CSS class "loginBtn":
|
||||
|
||||
$$('button.loginBtn');
|
||||
|
||||
|
||||
|
||||
Lastly, the [`x()`](commandline-api.md#xpath) method takes an XPath path as a parameter and returns an array of all elements that match the specified path. The following returns all the <script> elements that are children of the `<body>` tag:
|
||||
|
||||
$x('/html/body/script');
|
||||
|
||||
### Inspecting DOM elements and JavaScript heap objects
|
||||
|
||||
The [`inspect()`](commandline-api.md#inspectobject) method takes a DOM element reference (or JavaScript reference) as a parameter and displays the element or object in the appropriate panel—the Elements panel for DOM elements, or the Profile panel for a JavaScript object.
|
||||
|
||||
For example, in the following screenshot the `$()` function is used to get a reference to an `<li>` element. Then the last evaluated expression property ([`$_`](commandline-api.md#_)) is passed to `inspect()` to open that element in the Elements panel.
|
||||
|
||||
|
||||
|
||||
### Accessing recently selected elements and objects
|
||||
|
||||
Often when testing you'll select DOM elements—either directly in the Elements panel or using the Selection tool (magnifying glass)—so that you can further inspect the element. Or, when analyzing a memory snapshot in the Profiles panel, you might select a JavaScript object to further inspect it.
|
||||
|
||||
The Console remembers the last five elements (or heap objects) you've selected and makes them available as properties named [**`$0`**, **`$1`**, **`$2`**, **`$3`**](commandline-api.md#0-4) and [**`$4`**](commandline-api.md#0-4). The most recently selected element or object is available as **`$0`**, the second most as **`$1`**, and so forth.
|
||||
|
||||
The following screenshot shows the values of these properties after selecting three different elements in turn from the Elements panel:
|
||||
|
||||
|
||||
|
||||
Note: You can also Right-click or Control-click on any element in the Console and select **Reveal in Elements Panel**.
|
||||
|
||||
### Monitoring events
|
||||
|
||||
The [`monitorEvents()`](commandline-api.md#monitoreventsobject-events) command monitors an object for one or more specified events. When an event occurs on the monitored object, the corresponding Event object is logged to the Console. You specify the object and the events you want to monitor on that object. For example, the following code enables event monitoring for every "resize" event on the global window object.
|
||||
|
||||
monitorEvents(window, "resize");
|
||||
|
||||
|
||||
|
||||
To monitor several events, you can pass an array of event names as the second parameter. The code below monitors both "mousedown" and "mouseup" events on the body of the document.
|
||||
|
||||
monitorEvents(document.body, ["mousedown", "mouseup"]);
|
||||
|
||||
You can also pass one of the supported "event types" that DevTools maps to a set of actual event names. For example, the "touch" event type cause DevTools to monitor "touchstart", "touchend", "touchmove", and "touchcancel" events on the target object.
|
||||
|
||||
monitorEvents($('#scrollBar'), "touch");
|
||||
|
||||
See [`monitorEvents()`](commandline-api.md#monitoreventsobject-events) in the Console API Reference for a list of supported event types.
|
||||
|
||||
To stop monitoring events call `unmonitorEvents()`, passing the object to stop monitoring.
|
||||
|
||||
unmonitorEvents(window);
|
||||
|
||||
### Controlling the CPU profiler
|
||||
|
||||
You can create JavaScript CPU profiles from the command line with the [`profile()`](commandline-api.md#profilename) and [`profileEnd()`](commandline-api.md#profileendname) commands. You can optionally specify a name that's applied to the profile you create.
|
||||
|
||||
For example, the following shows an example of creating a new profile with the default name:
|
||||
|
||||
|
||||
|
||||
The new profile appears in the Profiles panel under the name "Profile 1":
|
||||
|
||||
|
||||
|
||||
If you specify a label for the new profile, it is used as the new profile's heading. If you create multiple profiles with the same name, they are grouped as individual runs under the same heading:
|
||||
|
||||
|
||||
|
||||
The result in the Profiles panel:
|
||||
|
||||
|
||||
|
||||
CPU profiles can be nested, for example:
|
||||
|
||||
profile("A");
|
||||
profile("B");
|
||||
profileEnd("B")
|
||||
profileEnd("A")
|
||||
|
||||
The calls to stop and start profiling do not need be properly nested. For example, the following works the same as the previous example:
|
||||
|
||||
profile("A");
|
||||
profile("B");
|
||||
profileEnd("A");
|
||||
profileEnd("B");
|
||||
|
||||
{{/partials.standard_devtools_article}}
|
||||
Загрузка…
Ссылка в новой задаче