Posted By

jschilling on 05/02/09


Tagged

javascript alert debugging logging


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

HubertGaulin
damarev
cmahoney


intelligent logging


 / Published in: JavaScript
 

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

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

  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. };

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jschilling on February 26, 2010

updated the snippet to always remain fixed in the viewport - non-intrusive transparency by default then opaque on mouseover

Posted By: jschilling on February 26, 2010

updated the snippet to always remain fixed in the viewport - non-intrusive transparency by default then opaque on mouseover

You need to login to post a comment.