Skip to content

Instantly share code, notes, and snippets.

@mfdj

mfdj/console_methods.html

Last active August 25, 2015 21:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mfdj/5484abf059d332b31390 to your computer and use it in GitHub Desktop.
Save mfdj/5484abf059d332b31390 to your computer and use it in GitHub Desktop.
Download ZIP
browser console methods
Raw
console_methods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>console methods</title>
</head>
<body>
<script>
console.assert(1 === true, "assert 1 is strictly equal to true");
console.log({a: "eh", b: "bee"}, [1,2,4,8,16]);
console.log("Hello, %s. You've called me %d times.", "Barb", 200.9);
console.dir({a: "eh", b: "bee"}, [1,2,4,8,16]);
console.dirxml({a: "eh", b: "bee"});
(function willError() {
console.error({a: "eh", b: "bee"}, [1,2,4,8,16]);
})();
try {
console._exception("my exception");
} catch (e) {
console.log("Caught " + e);
}
console.group();
console.log("thing-a");
console.log("thing-b");
console.log("thing-c");
console.groupEnd();
console.groupCollapsed();
console.log("thing-a");
console.log("thing-b");
console.log("thing-c");
console.groupEnd();
console.info("my info");
console.log("my log"); // .debug(…) is an alias for .log(…)
(function willTrace() {
console.trace({a: "eh", b: "bee"}, [1,2,4,8,16]);
})();
console.warn({what: "my warn"});
console.timeStamp("timeStamp it!");
function countThis() {
console.count("This line run");
}
countThis();
countThis();
countThis();
console.info('table of array');
console.table([0, 1, 2, 3, 4]);
console.info('dir of array');
console.dir([0, 1, 2, 3, 4]);
console.info('table of object');
console.table({a: "eh", b: "bee"});
console.info('dir of object');
console.dir({a: "eh", b: "bee"});
console.info('table of array containg arrays');
console.table([
['a', 'b'],
['c', 'd', 'e'],
['f', 'g'],
['h']
]);
console.info('table of array containing objects');
console.table([
{base: 2, exponent: 0, result: 1},
{base: 2, exponent: 1, result: 2},
{base: 2, exponent: 2, result: 4},
{base: 2, exponent: 3, result: 8}
]);
console.info('table of object containing arrays');
console.table({
two: [1, 2, 4, 8],
three: [1, 3, 12, 27, 41],
four: [1, 4, 16, 64, 256, 1024],
five: [1, 5, 25, 125, 625, 3125]
});
console.info('table of object containing objects');
console.table({
monday: {place: "flyods", dish: "breakfast burrito"},
wednesday: {place: "gravy", dish: "b + g"},
friday: {place: "tasty 'n alder", dish: "cobowy breakfast"},
});
console.time("timer1");
setTimeout(function() {
console.timeEnd("timer1");
}, 99);
// profile
function runSum(start, stop) {
for (sum = 0; start < stop; start++)
sum += start;
return sum;
}
function profile(key, profileThis) {
console.profile(key);
var result = profileThis();
console.profileEnd(key);
console.info(key + ": " + result);
}
for (var i = 0, len = 7; i < len; i++) {
setTimeout(
(function(i) {
return function() {
var to = Math.pow(10, i);
profile(
'runSum(1, 10^' + i + ')',
function() { return runSum(1, to); }
);
};
})(i),
100
);
}
</script>
</body>
</html>
Raw
console_methods.md

See: Console API on MDN and their results in Chrome.

assert

console.assert(1 === true, "assert 1 is strictly equal to true");

-> Assertion failed: assert 1 is strictly equal to true

log

console.log({a: "eh", b: "bee"}, [1,2,4,8,16]);

-> Object {a: "eh", b: "bee"} [1, 2, 4, 8, 16]

Also supports string-substitution:

console.log("Hello, %s. You've called me %d times.", "Barb", 200.9);

-> Hello, Barb. You've called me 200 times.

Some browsers alias this as console.debug(…).

dir

console.dir({a: "eh", b: "bee"}, [1,2,4,8,16]);

-> ▶ Object

Notice only the first argument is used.
"Object" Expandable/inspectable.

-> ▼ Object
    a: "eh"
    b: "bee"

dirxml

Chrome doesn't implement this — same result as a console.log.

trace, error

(function willTrace() {
    console.trace({a: "eh", b: "bee"}, [1,2,4,8,16]);
})();

-> (x) ▶ Object {a: "eh", b: "bee"} [1, 2, 4, 8, 16]

Expands with stack-trace/context:

-> ▼ Object {a: "eh", b: "bee"} [1, 2, 4, 8, 16]
     willTrace @ console.html:44
     (anonymous function) @ console.html:45

Error is basically the same with a red scheme and an (x) to the left.

(function willError() {
    console.error({a: "eh", b: "bee"}, [1,2,4,8,16]);
})();

-> (x) ▶ Object {a: "eh", b: "bee"} [1, 2, 4, 8, 16]

Expands with stack-trace/context of error:

-> (x) ▼ Object {a: "eh", b: "bee"} [1, 2, 4, 8, 16]
         willError @ console.html:15
         (anonymous function) @ console.html:16

In some browsers console._exception() is an alias for error (not chrome though, which throws an error: ha!)

group, groupCollapsed, groupEnd

console.group();
console.log("thing-a");
console.log("thing-b");
console.log("thing-c");
console.groupEnd();

-> ▼
   | thing-a
   | thing-b
   | thing-c

Alternatively you can use groupCollapsed to achieve the same result, in a pre-collapsed state:

console.groupCollapsed();
console.log("thing-a");
console.log("thing-b");
console.log("thing-c");
console.groupEnd();

-> ▶

log, info

log and info are nearly the same except info has a blue info symbol to it's left:

console.log({what: "my log"});

-> {what: "my log"}

console.info({what: "my info"});

-> (i) {what: "my info"}

warn

warn is the same as log/info except it has a yellow background and a yield-sign to it's left:

console.warn({what: "my warn"});
-> (^) Object {what: "my warn"}

count

really neat, implements an internal count of the number of times a line is run (in blue text):

function countThis() {
  console.count("This line run");
}
countThis();
countThis();
countThis();

-> This line run: 1
   This line run: 2
   This line run: 3

table

Nicely formats any double nested data like:

array containg arrays

console.table([
  ['a', 'b'],
  ['c', 'd', 'e'],
  ['f', 'g'],
  ['h']
]);

array containing objects

console.table([
  {base: 2, exponent: 0, result: 1},
  {base: 2, exponent: 1, result: 2},
  {base: 2, exponent: 2, result: 4},
  {base: 2, exponent: 3, result: 8}
]);

object containing arrays

console.table({
  two:   [1, 2, 4, 8],
  three: [1, 3, 12, 27, 41],
  four:  [1, 4, 16, 64, 256, 1024],
  five:  [1, 5, 25, 125, 625, 3125]
});

object containing objects

console.table({
  monday:    {place: "flyods", dish: "breakfast burrito"},
  wednesday: {place: "gravy", dish: "b + g"},
  friday:    {place: "tasty 'n alder", dish: "cobowy breakfast"},
});

At the third level (object -> array -> object, array -> array -> array, etc…) just shows a string

console.table([
  ['1a', '1b', ['1c', 67, 78, 89]],
  ['2a', {a: 'eh', b: 'bee'}, '2c']
]);

-> | (index) | 0    | 1      | 2        | 
   | ---     | ---  | ---    | ---      |
   | 0       | "1a" | "1b"   | Array[4] |
   | 1       | "2a" | Object | "2c"     |

A single level value (just an array or object) doesn't show a table but simply what console.dir(…) already shows.

time, timeEnd

A string is required to id the timer:

console.time("timer1"); 
console.timeEnd("timer1");

-> timer1: 0.003ms

Non-strings are simply coerced:

console.time(1);
console.timeEnd(1);

-> 1: 0.003ms

console.time({}); 
console.timeEnd({a: 1});

-> [object Object]: 0.037ms

console.time([]); 
console.timeEnd([]);

-> : 0.022ms

console.time(''); 
console.timeEnd([]);

-> : 0.022ms

No-arg not gonna cut it:

console.time(); 
console.timeEnd();

-> undefined

Also notice you cannot restart an active timer:

console.time("no restart");

setTimeout(function() { 
  console.time("no restart"); // has no effect
  console.timeEnd("no restart");
}, 999);

-> "no restart": 1002.231ms

profile, profileEnd

function runSum(start, stop) {
  for (sum = 0; start < stop; start++)
    sum += start;
  return sum;
}

function profile(key, profileThis) {
  console.profile(key);
  var result = profileThis();
  console.profileEnd(key);
  console.info(key + ": " + result);
}

for (var i = 0, len = 9; i < len; i++) {
  var to = Math.pow(10, i);
  profile(
    'runSum(1, 10^' + i + ')',
    function() { return runSum(1, to); }
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment