Revisions to Add a console to Stack Snippets

deleted 89 characters in body

Source Link

edited Mar 26 at 20:17

2.2k
1
24
33

All calls to console.log() (info(), warn(), error(), table(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

/* config stuff... ignore this line */ console.config({ maximize: true, timeStamps: false });

// sample data
const values = [
  1e100, 
  "a",
  true, 
  new Date(), 
  x => 1, 
  /(?:)/ig, 
  undefined, 
  null,
  document.querySelector("button")
];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// table output
console.table([
  { Name: "Zoe", Age: 20 },
  { Name: "Xander", Age: 21 },
  { Name: "Cthulhu", Age: Infinity },
]);

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

All calls to console.log() (info(), warn(), error(), table(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

/* config stuff... ignore this line */ console.config({ maximize:true });

// sample data
const values = [
  1e100, 
  "a",
  true, 
  new Date(), 
  x => 1, 
  /(?:)/ig, 
  undefined, 
  null,
  document.querySelector("button")
];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// table output
console.table([
  { Name: "Zoe", Age: 20 },
  { Name: "Xander", Age: 21 },
  { Name: "Cthulhu", Age: Infinity },
]);

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

All calls to console.log() (info(), warn(), error(), table(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.

/* config stuff... ignore this line */ console.config({ maximize: true, timeStamps: false });

// sample data
const values = [
  1e100, 
  "a",
  true, 
  new Date(), 
  x => 1, 
  /(?:)/ig, 
  undefined, 
  null,
  document.querySelector("button")
];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// table output
console.table([
  { Name: "Zoe", Age: 20 },
  { Name: "Xander", Age: 21 },
  { Name: "Cthulhu", Age: Infinity },
]);

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

added 338 characters in body

Source Link

edited Mar 26 at 19:42

canon

2.2k
1
24
33

All calls to console.log() (info(), warn(), error(), table(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

/* config stuff... ignore this line */ console.config({ maximize:true });

// sample valuesdata
varconst values = [1e100[
  1e100, 
  "a",
  true, 
  new Date(), 
  x => 1, 
  /(?:)/ig, 
  undefined, null];
  null,
  document.querySelector("button")
];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// sample clicktable handleroutput
document.querySelector("button")console.addEventListenertable("click",[
 function(e) { Name: "Zoe", Age: 20 },
  console.log("clicked{ Name: %o""Xander", this);Age: 21 },
  { Name: "Cthulhu", Age: Infinity },
]);

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

_{Project link
Minified version
Unminified version}

All calls to console.log() (info(), warn(), error(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

// sample values
var values = [1e100, "a", true, new Date(), x => 1, /(?:)/ig, undefined, null];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// sample click handler
document.querySelector("button").addEventListener("click", function(e) {
  console.log("clicked: %o", this);
});

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

_{Project link
Minified version
Unminified version}

All calls to console.log() (info(), warn(), error(), table(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

/* config stuff... ignore this line */ console.config({ maximize:true });

// sample data
const values = [
  1e100, 
  "a",
  true, 
  new Date(), 
  x => 1, 
  /(?:)/ig, 
  undefined, 
  null,
  document.querySelector("button")
];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// table output
console.table([
  { Name: "Zoe", Age: 20 },
  { Name: "Xander", Age: 21 },
  { Name: "Cthulhu", Age: Infinity },
]);

// throw a test error
throw new Error("test!");

<!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button>

_{Project link
Minified version
Unminified version}

deleted 96 characters in body

Source Link

edited Mar 26 at 19:32

canon

2.2k
1
24
33

All calls to console.log() (info(), warn(), error(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Objects are printed using a variation of JSON.stringify() (including functions, regex, undefined, etc) with custom handling for HTMLElementHandles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

All calls to console.log() (info(), warn(), error(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Objects are printed using a variation of JSON.stringify() (including functions, regex, undefined, etc) with custom handling for HTMLElement
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.

All calls to console.log() (info(), warn(), error(), and clear()) are passed along to the actual console
Loosely imitates Chrome's output (colors and styles excluded)
Handles circular references via lazy-expansion.
Works by injecting elements into the page... so, it obviously pollutes the DOM.
The number of entries is limited to 50. Older entries will be removed to make room for newer entries.
Logs unhandled errors.
Handles circular references. You could log window; though, I wouldn't recommend it.