1 (function(window){2 3 var dom = document.createElement('div');4 dom.id = 'logger';5 6 var list = document.createElement('div');7 list.className = 'logger-list';8 dom.appendChild(list);9 10 var button = document.createElement('button');11 button.className = 'logger-button';12 button.innerHTML = 'loGGer';13 button.addEventListener('click', function(event){14 list.classList.toggle('logger-see');15 }, true);16 dom.appendChild(button);17 18 var counter = 0;19 20 window.addEventListener('load', function(event){21 document.body.appendChild(dom);22 }, true);23 24 window.logger = {25 'clear':function() {26 var list = document.getElementById('logger');27 list.innerHTML = '';28 counter = 0;29 },30 'log':function(o) {31 counter++;32 var entry = document.createElement('div');33 entry.className = 'log';34 35 var entry_counter = document.createElement('div');36 entry_counter.className = 'entry-counter';37 entry_counter.innerHTML = counter;38 entry.appendChild(entry_counter);39 40 var entry_content = document.createElement('div');41 entry_content.className = 'entry-content';42 entry.appendChild(entry_content);43 44 if (typeof o == 'string') {45 entry_content.innerHTML = o;46 } else {47 var f = null;48 var fa = null;49 var fb = null;50 51 var k;52 var ko=null;53 for (k in o) {54 ko = o[k];55 56 f = document.createElement('div');57 f.className = 'log-line';58 59 fa = document.createElement('span');60 fa.className = 'log-line-a';61 fa.innerHTML = k+' = ';62 f.appendChild(fa);63 64 fb = document.createElement('span');65 fb.className = 'log-line-b';66 if (typeof ko == 'object') {67 var a = document.createElement('span');68 a.className = 'log-inspect';69 a.innerHTML = ''+ko+'';70 if (ko != null) {71 a.ko = ko;72 a.addEventListener('click', function(event){73 logger.log(this.ko);74 }, true);75 }76 fb.appendChild(a);77 } else if (typeof ko == 'string') {78 var a = document.createElement('textarea');79 a.className = 'log-string';80 a.k = k;81 a.o = o;82 a.addEventListener('keyup', function(event){83 this.o[this.k] = this.value;84 }, true);85 a.value = ko;86 fb.appendChild(a);87 } else if (typeof ko == 'number') {88 var a = document.createElement('span');89 a.className = 'log-number';90 a.setAttribute('contentEditable', true);91 a.innerHTML = ko;92 a.k = k;93 a.o = o;94 a.addEventListener('keyup', function(event){95 alert(this.o[this.k]);96 this.o[this.k] = this.value;97 98 }, true);99 fb.appendChild(a);100 } else if (typeof ko == 'boolean') {101 var a = document.createElement('input');102 a.setAttribute('type', 'checkbox');103 a.className = 'log-boolean';104 a.checked = ko;105 a.k = k;106 a.o = o;107 a.addEventListener('click', function(event) {108 this.o[this.k] = this.checked;109 }, true);110 fb.appendChild(a);111 } else if (typeof ko == 'function') {112 var a = document.createElement('pre');113 a.className = 'log-function';114 a.innerHTML = 'function ...';115 a.ko = ko;116 a.addEventListener('click', function(event){117 this.innerHTML = this.ko;118 this.classList.add('log-function-opened');119 }, true);120 121 fb.appendChild(a);122 } else {123 fb.innerHTML = typeof(ko);124 }125 f.appendChild(fb);126 127 entry_content.appendChild(f);128 129 list.scrollTop = 0;130 }131 }132 133 if (list.firstChild == null) {134 list.appendChild(entry);135 } else {136 list.insertBefore(entry, list.firstChild);137 }138 139 return entry_content;140 }141 }142 143 }(this))144 145 146 logger.log(window);147 Enlace
El enlace para compartir es: