March 18, 2015 at 10:09

Console Method Reference in JS

    A lot of time has passed since the systematic methods of the console object have been systematized; some browsers have received support for previously missing methods. The table is of natural interest to developers, so why not update it by adding descriptions in one article? Github .

    * -⊝- - the method is not used in this environment;
    * ± - the method is used, but with features (visible in the tooltip);
    * `+` - a full-fledged implementation of the method.
    Chrome Firebug Firefox IE Node.js SafariOpera
    assert (expression [, object, ...])
    If the expression expression is false, console.error outputs; otherwise, nothing is output.
      +  ++ (28.0+)  +  +  +  ±
    clear ()
    Clears the console window.
      +  +-⊝-  +-⊝-  +  +
    count ([object])
    Each time displays the number of passes of a given point in the code. If there is an object argument , then object.toString () is displayed before the counter value.
      +  ++ (30.0+)  +-⊝-  +± ...
    debug (object [, object, ...])
    Equivalent to console.log for compatibility with the old version of the console object, when .debug additionally displayed a link to the line of code from which it was called.
       equals .log ()  +  +  +  +-⊝-  +± ...
    dir (object)
    object is displayed as a Javascript object (for DOM elements, all their attributes and methods). % O works similarly in console.log in Chrome.
      +  ++ (8+)+ (9+)  +  +  +
    dirxml (object)
    The object XML is displayed.
      +  +-⊝-+ (11+)-⊝-  +± ...
    error (object [, object, ...])
    The result of console.trace also displays the error for the place from where it was called (without stopping the execution of the program). Patterns (% s,% d (% i),% f,% o,% O,% c) are supported, as in console.log. Call stack trace example (Firefox 31+):
      +± ...  ++ (8+)  +  +± ...
    exception (object [, object, ...])
    Equivalent to error ()
      equals .error ()-⊝--⊝-+ (28+)-⊝-       -⊝--⊝--⊝-
    group (object [, object, ...])
    Begins an expanded group of entries in the console, which can then be manually collapsed. The group ends with the .groupEnd () command. Patterns are supported (see .log () ). Example code and result (from the article " Features of the browser console ", 2013):
    console.group("module A")
console.log('a')
console.log('a')
console.log('a')
console.group("nested module B")
console.log('b')
console.log('b')
console.log('b')
console.groupEnd()
console.groupCollapsed("nested collapsed module C")
console.log('c')
console.log('c')
console.log('c')
console.groupEnd()
console.groupEnd()
console.group("module D")
console.log('d')
console.log('d')
console.log('d')
console.groupEnd()

      +  +± ...+ (11+)-⊝-+ (4+)  +
    groupCollapsed (object [, object, ...])
    Begins the initially collapsed group of entries in the console, which can then be expanded manually. The group ends with the .groupEnd () command. Patterns are supported (see .log () ).
      +  +± ... (9+)+ (11+)-⊝-  + (5.1+)  +
    groupEnd ()
    It marks the end of a group of log messages that are able to collapse-expand (except for Firefox) manually.
      +  ++ (9+)+ (11+)-⊝-  + (4+)  +
    Chrome Firebug Firefox IE Node.js SafariOpera
    info (object [, object, ...])
    It is similar to .log (), but it is executed in a different design for distinguishing between types of messages, for example, for gradation of importance or for other semantic meaning of this group of messages. Patterns are supported (described in .log () ). Example differences for Firebug, Chrome, IE9:
      +  +  +  +  +  +  +
    log (object [, object, ...])
    Outputs arguments to the console, separated by spaces. The most popular of the console commands.

    It supports patterns - special names in the first argument, indicating that it should be used as a template into which the following arguments will be substituted for the terms (as in printf () in C, but much simpler). Examples:

    console.log('У Пети было %d %s',10,'яблок');
console.log('Пи равно %f',Math.PI);
console.log('%cКаждый %cОхотник %cЖелает%c знать, где сидит фазан','color:red;','font-size:16px;color:orange;','background:black;color:yellow;','font:normal;color:normal;background:normal;');
console.log('body as DOM: %o',document.getElementsByTagName('body')[0]);
console.log('object: %O',{a:1,b:2});
console.log('body as Object: %O',document.getElementsByTagName('body')[0]);

    Types of patterns and the type of the data into which the value of the substituted argument is converted:
    % s - string.
    % d or % i is a number.
    % f is a floating-point number (Firebug also supports).
    % o - DOM element (Firebug displays as a link to an element. Chrome, in addition to a link, displays an element in the console. Firefox clicks on an element in a modal window (all attributes and methods of this object are available).
    % O - JS object (not supported in Firefox; Chrome converts the DOM object to a js object for this pattern; Firebug does not distinguish % o from % O ).
    % c- CSS-style (color, background, font; in Firefox - from version 31). An example of styling with the% c pattern (Firefox):
        (important)  +  +  +  +  +  +± ...
    markTimeline ()
    An analogue of .timeStamp () for Safari, but .timeStamp () is not supported in it, and vice versa.
     = .timeStamp ()-⊝--⊝--⊝--⊝--⊝-  +-⊝-
    profile ([label])
    Launches a Javascript profiler , then displays the results under the name "label".
      +  +(devtools)+ (10+)-⊝-  +-⊝-
    profileEnd ()
    Turns off the Javascript profiler.
      +  +(devtools)+ (10+)-⊝-  +-⊝-
    table (data [, columns])
    Two-dimensional tabular data - in table format. Data - an array or an object (or an object from objects, an object from arrays), each element of which will be a row in the table. The first column of a two-dimensional array will be its index (from 0). Or, if it is an object, the first column will consist of the keys of the object. Example from Firefox (object of objects):

    Columns - an additional array of column names for table headers, if the rows are created from arrays, and we do not want the names to be numeric indices. Above - there was an example of a result (Firefox) obtained either from named columns or from an object of objects. Below is what would be from an array of arrays without the columns parameter:
      +  ++ (34.0+)-⊝--⊝--⊝--⊝-
    time (label)
    Turns on the counter (milliseconds) under the name label.
      +  ++ (10+)+ (11+)  ++ (4+)  ±
    timeEnd (label)
    Stops the counter (milliseconds) under the name label and publishes the result under this name. Example (Chrome):
      +  ++ (10+)+ (11+)  ++ (4+)  ±
    timeStamp ([label])
    Draws timestamps on the script timing diagram, which allows you to monitor the dynamics of the program. Example (Firebug):
      +  +-⊝--⊝--⊝--⊝--⊝-
    trace ()
    Shows the stack trace of the function at the moment of execution (the same as usually shown when stopping at the place of the error). An example in Safari (in the sidebar), in Chrome (in the console):

    In Firefox:
      +  ++ (10+)+ (11+)  ++ (7.0.1+)± ...
    warn (object [, object, ...])
    It is similar to .log () and .info (), but is issued in a different design to distinguish message types. Patterns are supported (described in .log () ).
      +  +  +  +  +  +  +
    debugger
    Stops Javascript execution on the current line. Equivalent to setting a breakpoint in the debugger. In addition to stopping, it does not affect the executable program.
      (operator)  +  +  +  +  +  +  +
    throw new Error ('mesasge');
    Stops Javascript execution on the current line, interrupting execution. (Supported by all Javascript runtimes.)
    ChromeFirebugFirefoxIENode.jsSafariOpera


    • Console API Reference for Chrome
    • Console API in Firebug
    • Console object (MDN)
    • Console object in IE10 (MSDN)
    • in Node.js v0.12.0
    • ... in Safari Web Inspector Guide
    • Console in Opera Dragonfly

    • Use the console to the full
    • Advanced JavaScript debugging using console.table ()
    • Firebug 1.6 (console.table) release
    • Using the F12 Tools Console to View Errors and Status (MSDN)
    • ... + much more - Firefox Developer Tools Episode 31 - console stack traces, styled console logs in Fx31.

    • FireBug * Console API - describes the subtleties of implementation seen in browser tests in 2013;
    • Javascript

    UPD console API : so that everyone can perfect this description, translate it into another language, make updates as browsers evolve , the code is laid out on Github and the foundations of multilingualism and the ability to add your own spoiler to this plate (spoilers in article, of course, tied to the publication site). (The root of the description is the English version, but the markup of the table on the Github should be brought to quality).

    UPD: in the comment there was a suggestion to do sorting by columns (to separate methods unsupported for this environment). If (on Githaba.io) the descriptions with spoilers are driven in one row, it will be possible to use a standard script sorter (are there any enthusiasts? Write to the LAN or issue if you need to agree on the layout, because I will somehow do the spoilers).

    UPD 2015-03-21: spoilers, viewing modes and HTML are more flexible than in this publication. Not only in this and fully expanded form , but also in a more dense form , 1 method per row of the table, with the possibility of 1 click to switch between them. English version .
    Tags:

    Also popular now: