├── .gitignore
├── LICENSE
├── README.md
├── bundle.js
├── domconsole.js
├── index.html
├── package.json
└── test
    └── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Alexander Praetorius
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dom-console
 2 | console.log output in the dom
 3 | 
 4 | ## description
 5 | very convenient when experimenting with npm libraries in the browser. For example using [requirebin.com](http://requirebin.com/)
 6 | 
 7 | 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.
 8 | 
 9 | ## example
10 | see http://serapath.github.io/dom-console
11 | 
12 | ## usage
13 | ```js
14 | var Buffer = require('buffer').Buffer
15 | var domconsole = require('dom-console')
16 | var opts = { lineLength: 60 } // default
17 | var api = /*element*/ domconsole(/*opts*/).api
18 | 
19 | console.log(new Buffer(5))
20 | 
21 | var x = { leaf: 'leaf' }
22 | x['circular1'] = x
23 | x.y = {}
24 | x.y.circular2 = x.y
25 | console.log(x)
26 | 
27 | console.log({a:'x', fn:function(x){return 5}})
28 | console.log(new Date)
29 | console.log({a:'b',c:[1,2,3],x:{y:{z:['a',{b:'c'}]}}})
30 | console.log(null)
31 | console.log(undefined)
32 | console.log("hey")
33 | console.log(false)
34 | console.log(true)
35 | console.log(function asdf () {})
36 | console.log(12)
37 | console.log(/asdf/)
38 | console.log((function(){ return arguments })(1,true))
39 | console.log([])
40 | console.log(document.createElement('div'))
41 | console.log(NaN)
42 | 
43 | console.log({a: '5'})
44 | console.error({a: '5'})
45 | console.log(document.createElement('div'))
46 | console.error(document.createElement('div'))
47 | var div = document.createElement('div')
48 | div.innerHTML = '<div><div>asdf</div></div>'
49 | console.log(div)
50 | console.log('WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW ')
51 | 
52 | console.info('it works :-)')
53 | 
54 | // api usage
55 | api.toggle() // expand or minimize the dom-console
56 | console.log(api.serialize()) // retrieve the log that was logged to the dom-console
57 | api.clear() // clear the content of the dom-console
58 | 
59 | api.log('visible in devtools console & only this dom-console instance')
60 | api.info('visible in devtools console & only this dom-console instance')
61 | api.error('visible in devtools console & only this dom-console instance')
62 | 
63 | // also logs errors nicely
64 | function test (p) { var x = JSON.parse(p) }
65 | test(function(){})
66 | 
67 | console.log(new Error('Ups! Something wrong...'))
68 | console.error(new Error('Ups! Something wrong...'))
69 | ```
70 | 


--------------------------------------------------------------------------------
/domconsole.js:
--------------------------------------------------------------------------------
  1 | var javascriptserialize = require('javascript-serialize')
  2 | var escapehtml = require('escape-html')
  3 | var jsbeautify = require('js-beautify')
  4 | var type = require('component-type')
  5 | var bel = require('bel')
  6 | var csjs = require('csjs-inject')
  7 | 
  8 | var currentError
  9 | 
 10 | window.addEventListener('error', function (event) {
 11 |   currentError = new Error(event.message)
 12 |   currentError.timeStamp = event.timeStamp
 13 |   currentError.isTrusted = event.isTrusted
 14 |   currentError.filename = event.filename
 15 |   currentError.lineno = event.lineno
 16 |   currentError.colno = event.colno
 17 |   currentError.error = event.error
 18 |   currentError.type = event.type
 19 | })
 20 | 
 21 | window.onerror = function (msg, url, lineno, col, error) {
 22 |   error = error ? error : currentError
 23 |   var val = { msg: msg, url: url, lineno: lineno, col: col, error: error }
 24 |   console.error(val)
 25 | }
 26 | 
 27 | var KONSOLES = [{
 28 |   error       : console.error.bind(console),
 29 |   info        : console.info.bind(console),
 30 |   log         : console.log.bind(console)
 31 | }]
 32 | console.error = broadcast('error')
 33 | console.info = broadcast('info')
 34 | console.log = broadcast('log')
 35 | 
 36 | function broadcast (mode) {
 37 |   return function broadcastMode () {
 38 |     var args = arguments
 39 |     KONSOLES.forEach(function (api) { api[mode].apply(null, args) })
 40 |   }
 41 | }
 42 | 
 43 | module.exports = domconsole
 44 | 
 45 | var css = csjs`
 46 |   .wrapper            {
 47 |     position          : fixed;
 48 |     box-sizing        : border-box;
 49 |     background-color  : black;
 50 |     padding           : 15px 20px 15px 20px;
 51 |     border-radius     : 15px;
 52 |     bottom            : 0;
 53 |     width             : 98%;
 54 |     min-height        : 50px;
 55 |     display           : flex;
 56 |     flex-direction    : column;
 57 |   }
 58 |   @media screen and (min-width: 0px) {
 59 |     .konsole          {
 60 |       font-size       : calc(0.5em + 1vmin);
 61 |     }
 62 |   }
 63 |   .konsole            {
 64 |     font-family       : Courier;
 65 |     color             : white;
 66 |     overflow-y        : scroll;
 67 |     overflow          : auto;
 68 |     height            : 45vh;
 69 |     margin-bottom     : 30px;
 70 |   }
 71 |   .line               {
 72 |     margin            : 0;
 73 |     line-height       : 1.5em;
 74 |   }
 75 |   .seperator          {
 76 |     border            : 1px dashed #333
 77 |   }
 78 |   .error              {
 79 |     color             : red;
 80 |   }
 81 |   .info               {
 82 |     color             : blue;
 83 |   }
 84 |   .log                {
 85 |     color             : white;
 86 |   }
 87 |   .nav                {
 88 |     display           : flex;
 89 |     position          : absolute;
 90 |     bottom            : 0;
 91 |     padding-bottom    : 15px;
 92 |   }
 93 |   .btn                {
 94 |     margin-right      : 10px;
 95 |   }
 96 |   .dashboard          {
 97 |     display           : flex;
 98 |   }
 99 |   .stats              {
100 |     padding           : 1px 10px;
101 |     margin-left       : 10px;
102 |     background-color  : white;
103 |     color             : black;
104 |     border-radius     : 5px;
105 |   }
106 |   .errorstats         {
107 |     background-color  : red;
108 |   }
109 |   .infostats          {
110 |     background-color  : blue;
111 |   }
112 |   .logstats           {
113 |     background-color  : white;
114 |   }
115 |   .hidden             {
116 |     display           : none;
117 |   }
118 | `
119 | 
120 | function domconsole (opts) {
121 |   if (!opts) opts = { auto: true }
122 |   if (!opts.lineLength) opts.lineLength = 60
123 | 
124 |   var konsole = bel`<div class=${css.konsole}></div>`
125 |   var bToggle = bel`<button onclick=${flip} class=${css.btn}>minimize</button>`
126 |   var error   = bel`
127 |     <div title="error" class="${css.errorstats} ${css.stats}">0</div>
128 |   `
129 |   var info    = bel`
130 |     <div title="info" class="${css.infostats} ${css.stats}">0</div>
131 |   `
132 |   var log     = bel`
133 |     <div title="log" class="${css.logstats} ${css.stats}">0</div>
134 |   `
135 |   var stats   = bel`
136 |     <div class="${css.dashboard} ${css.hidden}">
137 |      ${error} ${info} ${log}
138 |     </div>
139 |   `
140 |   stats.log   = log
141 |   stats.info  = info
142 |   stats.error = error
143 |   var wrapper = bel`
144 |     <div class=${css.wrapper}>
145 |       ${konsole}
146 |       <div class=${css.nav}>
147 |         <button onclick=${cleanse} class=${css.btn}> clear </button>
148 |         ${bToggle}
149 |         ${stats}
150 |       </div>
151 |     </div>
152 |   `
153 | 
154 |   var dispatch = dispatcher(konsole, stats, opts)
155 | 
156 |   var api = {
157 |     log         : dispatch('log'),
158 |     info        : dispatch('info'),
159 |     error       : dispatch('error'),
160 |     toggle      : flip,
161 |     clear       : cleanse,
162 |     serialize   : function serializeKonsole () { return konsole.innerText }
163 |   }
164 |   wrapper.api = api
165 | 
166 |   register(api)
167 | 
168 |   if (opts.auto) {
169 |     flip() // start minimized
170 |     document.body.appendChild(wrapper)
171 |   }
172 | 
173 |   return wrapper
174 | 
175 |   function hide () {
176 |     error.innerHTML = info.innerHTML = log.innerHTML = 0
177 |     error.style.visibility = 'hidden'
178 |     info.style.visibility = 'hidden'
179 |     log.style.visibility = 'hidden'
180 |   }
181 |   function flip () {
182 |     var hidden = konsole.classList.toggle(css.hidden)
183 |     if (hidden) hide()
184 |     stats.classList.toggle(css.hidden)
185 |     bToggle.innerHTML = hidden ? 'expand' : 'minimize'
186 |   }
187 |   function cleanse () {
188 |     konsole.innerHTML = ''
189 |     hide()
190 |   }
191 | }
192 | 
193 | function register (api) { KONSOLES.push(api) }
194 | 
195 | function dispatcher (konsole, stats, opts) {
196 |   return function dispatch (mode) {
197 |     return function logger () {
198 |       if (this !== window) KONSOLES[0][mode].apply(null, arguments)
199 |       var types = [].slice.call(arguments).map(type)
200 |       var isHidden = konsole.classList.contains(css.hidden)
201 |       javascriptserialize.apply(null, arguments).forEach(function (val, idx) {
202 |         if (types[idx] === 'element') val = jsbeautify.html(val)
203 |         var lines = val.match(new RegExp('.{1,' + opts.lineLength + '}', 'g'))
204 |         lines.forEach(function (line) {
205 |           var el = bel`<pre class="${css.line} ${css[mode]}">${line}</pre>`
206 |           konsole.appendChild(el)
207 |         })
208 |         var sep = bel`<hr class=${css.seperator}>`
209 |         konsole.appendChild(sep)
210 |         if (isHidden) {
211 |           stats[mode].innerHTML = (stats[mode].innerHTML|0) + 1
212 |           stats[mode].style.visibility = ''
213 |         } else {
214 |           sep.scrollIntoView()
215 |         }
216 |       })
217 |     }
218 |   }
219 | }
220 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <body>
 2 |   <a href="http://npmjs.org/package/dom-console">dom-console</a>
 3 |   (check the README and/or SOURCE CODE for more information)
 4 |   <h2>initialized with:</h2>
 5 |   <xmp style="background-color: #eee; width: 50vmax;">
 6 |     window.domconsole = require('dom-console')
 7 |     window.demo = domconsole()
 8 |   </xmp>
 9 |   <h2> Open developer tools and play with the api </h2>
10 |   <xmp style="background-color: #eee; width: 50vmax;">
11 |     // for example:
12 | 
13 |     demo.api.toggle()
14 |     demo.api.log('hello demo')
15 | 
16 |     var el = domconsole({ lineLength: 5 })
17 |     var api = el.api
18 | 
19 |     api.log('hello el')
20 | 
21 |     console.log('hello both')
22 | 
23 |     document.body.appendChild(el)
24 |   </xmp>
25 | 
26 |   <script src="bundle.js"></script>
27 | </body>
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dom-console",
 3 |   "version": "5.1.1",
 4 |   "description": "console.log output in the dom",
 5 |   "main": "domconsole.js",
 6 |   "scripts": {
 7 |     "test": "browserify test/test.js > bundle.js && opn index.html"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/serapath/dom-console.git"
12 |   },
13 |   "keywords": [
14 |     "dom",
15 |     "term",
16 |     "terminal",
17 |     "console",
18 |     "browser",
19 |     "devtools"
20 |   ],
21 |   "author": "serapath <dev@serapath.de> (http://www.github.com/serapath)",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/serapath/dom-console/issues"
25 |   },
26 |   "homepage": "https://github.com/serapath/dom-console#readme",
27 |   "dependencies": {
28 |     "bel": "^4.6.0",
29 |     "component-type": "^1.2.0",
30 |     "csjs-inject": "^1.0.1",
31 |     "escape-html": "^1.0.3",
32 |     "javascript-serialize": "^1.6.1",
33 |     "js-beautify": "^1.6.2"
34 |   },
35 |   "devDependencies": {
36 |     "opn-cli": "^3.1.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
 1 | var Buffer = require('buffer').Buffer
 2 | window.domconsole = require('..')
 3 | window.demo = domconsole()
 4 | 
 5 | console.log(new Buffer(5))
 6 | 
 7 | var x = { leaf: 'leaf' }
 8 | x['circular1'] = x
 9 | x.y = {}
10 | x.y.circular2 = x.y
11 | console.log(x)
12 | 
13 | console.log({a:'x', fn:function(x){return 5}})
14 | console.log(new Date)
15 | console.log({a:'b',c:[1,2,3],x:{y:{z:['a',{b:'c'}]}}})
16 | console.log(null)
17 | console.log(undefined)
18 | console.log("hey")
19 | console.log(false)
20 | console.log(true)
21 | console.log(function asdf () {})
22 | console.log(12)
23 | console.log(/asdf/)
24 | console.log((function(){ return arguments })(1,true))
25 | console.log([])
26 | console.log(document.createElement('div'))
27 | console.log(NaN)
28 | 
29 | console.log({a: '5'})
30 | console.error({a: '5'})
31 | console.log(document.createElement('div'))
32 | console.error(document.createElement('div'))
33 | var div = document.createElement('div')
34 | div.innerHTML = '<div><div>asdf</div></div>'
35 | console.log(div)
36 | console.log('WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW ')
37 | 
38 | console.info('it works :-)')
39 | 
40 | // api usage
41 | api.toggle() // expand or minimize the dom-console
42 | console.log(api.serialize()) // retrieve the log that was logged to the dom-console
43 | api.clear() // clear the content of the dom-console
44 | 
45 | api.log('visible in devtools console & only this dom-console instance')
46 | api.info('visible in devtools console & only this dom-console instance')
47 | api.error('visible in devtools console & only this dom-console instance')
48 | 
49 | // also logs errors nicely
50 | function test (p) { var x = JSON.parse(p) }
51 | test(function(){})
52 | 
53 | console.log(new Error('Ups! Something wrong...'))
54 | console.error(new Error('Ups! Something wrong...'))
55 | 


--------------------------------------------------------------------------------