intelligent logging


/ Published in: JavaScript
Save to your folder(s)

Intelligent logging for javascript (also compatible with Firebug). Thanks to Prototype.js, PPK, and Danny Goodman for the idea!


Copy this code and paste it in your HTML
  1. BASE = {
  2. /**
  3.   * USAGE
  4.   * BASE.log(o)
  5. * outputs the value of whatever is passed to it in either the firebug console,
  6. * or a newly created window on top of your content;
  7. * useful to debug various problems within your scripts
  8.   * @param o = any object, array, number, or string
  9.   */
  10. log:function(o)
  11. {
  12. var logger = (this.isObject(window.console) && window.console.firebug) || null;
  13. if(!logger){
  14. if(document.createElement && document.getElementById){
  15. var elem = document.createElement('div') || document.getElementById('logger'),
  16. p = document.createElement('pre') || elem.firstChild,
  17. t = null, d = document.getElementsByTagName('body')[0],
  18. r = null, res = 'no data passed
  19. ', opac = 20, that = this;
  20.  
  21. if(this.isObject(o) && !this.isArray(o)){
  22. r = [];
  23. for(var i in o){
  24. var name = o.nodeName || o.toString();
  25. r.push(name + '.' + i + '=' + o[i] + '
  26. ');
  27. }
  28. r.sort();
  29. res = r.join('
  30. ') || 'empty object
  31. ';
  32. }
  33. else if(this.isArray(o)){
  34. r = [];
  35. for(var i in o){
  36. var name = o.nodeName || o.toString();
  37. r.push(i + '=' + o[i] + '
  38. ');
  39. }
  40. r.sort();
  41. res = r.join('
  42. ') || 'empty array
  43. ';
  44. }
  45. else if(this.isString(o)){
  46. res = o + '
  47. ' || 'no string to display
  48. ';
  49. }
  50. else if(this.isNumber(o)){
  51. res = o + '
  52. ' || 'no number to display
  53. ';
  54. };
  55. if(!document.getElementById('logger')){
  56. t = document.createTextNode(res);
  57. p.appendChild(t); elem.appendChild(p);
  58. //required styles
  59. elem.id = 'logger'; elem.className = 'console-window';
  60. elem.style['overflow'] = 'auto'; elem.style['top'] = '0px'; elem.style['zIndex'] = '1000';
  61. elem.style['left'] = '25%'; elem.style['width'] = '50%'; elem.style['margin'] = '10px auto';
  62. elem.style['position'] = 'fixed';
  63. if(this.isIE){
  64. elem.style['position'] = 'absolute';
  65. document.body.style['overflowY'] = 'auto';
  66. document.body.style['height'] = '100%'
  67. }
  68. p.style.className = 'window-text'; p.style['whiteSpace'] = 'pre'; p.style['textAlign'] = 'left';
  69. //default styles can be overridden using !important declarations in style sheets
  70. elem.style['padding'] = '5px 20px'; elem.style['height'] = '250px'; elem.style['backgroundColor'] = '#ffffff';
  71. elem.style['border'] = '1px solid red';
  72. //add transparency
  73. this.setOpacity(opac, elem);
  74. elem.onmouseover = function(){
  75. that.setOpacity(100, elem);
  76. //this.style['position'] = 'fixed';
  77. };
  78. elem.onmouseout = function(){
  79. that.setOpacity(opac, elem);
  80. //this.style['position'] = 'absolute';
  81. };
  82. //return new node to add to DOM
  83. return d.insertBefore(elem, d.firstChild);
  84. }
  85. else {
  86. return document.getElementById('logger').firstChild.firstChild.nodeValue += res;
  87. }
  88. }
  89. else {
  90. window.alert('you should probably upgrade your browser!');
  91. }
  92. }
  93. else {
  94. if(this.isObject(o)){
  95. console.dir(o);
  96. }
  97. else {
  98. console.log(o);
  99. }
  100. }
  101. },
  102. isArray: function(object){
  103. return object !== null && typeof object == "object" &&
  104. 'splice' in object && 'join' in object;
  105. },
  106. isFunction: function(object){
  107. return typeof object == "function";
  108. },
  109. isObject: function(object){
  110. return (object && (typeof object === 'object' || this.isFunction(object))) || false;
  111. },
  112. isString: function(object){
  113. return typeof object == "string";
  114. },
  115. isNumber: function(object){
  116. return typeof object == "number";
  117. },
  118. isIE:function()
  119. {
  120. return !!( (/(msie 6|msie 7)/i).test(navigator.userAgent) && !(/opera/i).test(navigator.userAgent.indexOf('opera')) && window.ActiveXObject );
  121. }(),
  122. setOpacity:function(opacity, element)
  123. {
  124. if(!element.style['zoom']) {
  125. //correct hasLayout IE transparency
  126. element.style['zoom'] = 1;
  127. };
  128. if(element.style['MozOpacity']) {
  129. element.style['MozOpacity'] = (opacity / 100);
  130. };
  131. if(element.style['KhtmlOpacity']) {
  132. element.style['KhtmlOpacity'] = (opacity / 100);
  133. };
  134. if(element.filters) {
  135. element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')';
  136. element.style.filter = 'alpha(opacity=' + Math.round(opacity) + ')';
  137. };
  138. element.style['opacity'] = (opacity / 100);
  139. }
  140. };

URL: http://www.six-degrees.com/six-degrees.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.