https://github.com/serapath/dom-console

console.log output in the dom
https://github.com/serapath/dom-console

browser console devtools dom dom-console term terminal

Last synced: about 2 months ago
JSON representation

console.log output in the dom

• Host: GitHub
• URL: https://github.com/serapath/dom-console
• Owner: serapath
• License: mit
• Created: 2016-02-17T15:58:05.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-04-23T16:57:13.000Z (over 7 years ago)
• Last Synced: 2024-11-01T15:07:04.131Z (2 months ago)
• Topics: browser, console, devtools, dom, dom-console, term, terminal
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/dom-console
• Size: 351 KB
• Stars: 26
• Watchers: 6
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# dom-console

console.log output in the dom

## description

very convenient when experimenting with npm libraries in the browser. For example using [requirebin.com](http://requirebin.com/)

By default.it adds a console DOM element to the bottom of the page, which can be cleared and minimized/maximized via buttons and shows everything that can otherwise be seen in the DevTools JavaScript console.

## example

see http://serapath.github.io/dom-console

## usage

```js

var Buffer = require('buffer').Buffer

var domconsole = require('dom-console')

var opts = { lineLength: 60 } // default

var api = /*element*/ domconsole(/*opts*/).api

console.log(new Buffer(5))

var x = { leaf: 'leaf' }

x['circular1'] = x

x.y = {}

x.y.circular2 = x.y

console.log(x)

console.log({a:'x', fn:function(x){return 5}})

console.log(new Date)

console.log({a:'b',c:[1,2,3],x:{y:{z:['a',{b:'c'}]}}})

console.log(null)

console.log(undefined)

console.log("hey")

console.log(false)

console.log(true)

console.log(function asdf () {})

console.log(12)

console.log(/asdf/)

console.log((function(){ return arguments })(1,true))

console.log([])

console.log(document.createElement('div'))

console.log(NaN)

console.log({a: '5'})

console.error({a: '5'})

console.log(document.createElement('div'))

console.error(document.createElement('div'))

var div = document.createElement('div')

div.innerHTML = '
asdf
'

console.log(div)

console.log('WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW ')


console.info('it works :-)')

// api usage

api.toggle() // expand or minimize the dom-console

console.log(api.serialize()) // retrieve the log that was logged to the dom-console

api.clear() // clear the content of the dom-console

api.log('visible in devtools console & only this dom-console instance')

api.info('visible in devtools console & only this dom-console instance')

api.error('visible in devtools console & only this dom-console instance')

// also logs errors nicely

function test (p) { var x = JSON.parse(p) }

test(function(){})

console.log(new Error('Ups! Something wrong...'))

console.error(new Error('Ups! Something wrong...'))

```