夏日博客

A-A+

javascript的console.log()用法小结

2015年12月04日 前端设计 评论 2 条 阅读 132 views 次

console.log 原先是 Firefox 的“专利”，严格说是安装了 Firebugs 之后的 Firefox 所独有的调试“绝招”。

这一招，IE8 学会了，不过用起来比 Firebugs 麻烦，只有在开启调试窗口(F12)的时候，console.log 才能出结果，不然就报错。

今天看到 Opera 也有个叫 dragonfly 的东东，用这东西查看 DOM，已经可以和 Firebug 媲美，然而还是不能用 console.log。于是有人就提供了这样两句代码:

  1. window.console = window.console || {};   
  2. console.log || (console.log = opera.postError)；  

经测试，以上代码好使。

至此，Firefox/IE/Opera 都能用上 console.log 了。

当然，IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log，还是太过简单，比如参数是 Object 或者数组就没有进一步的显示功能。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>javascript的console.log()用法</title>   
  6. <script type="text/javascript">   
  7. /*   
  8. console.log 原先是 Firefox 的"专利"，严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招"。   
  9. 这一招，IE8 学会了，不过用起来比 Firebugs 麻烦，只有在开启调试窗口(F12)的时候，console.log 才能出结果，不然就报错。   
  10. 今天看到 Opera 也有个叫 dragonfly 的东东，用这东西查看 DOM，已经可以和 Firebug 媲美，然而还是不能用 console.log。于是有人就提供了这样两句代码：   
  11. windowwindow.console = window.console || {};   
  12. console.log || (console.log = opera.postError)；   
  13. 经测试，以上代码好使。   
  14. 至此，Firefox/IE/Opera 都能用上 console.log 了。   
  15. 当然，IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log，还是太过简单，比如参数是 Object 或者数组就没有进一步的显示功能。   
  16. */   
  17. //变量   
  18. var i = 'I am a string';   
  19. console.log('变量：',i);   
  20. //数组   
  21. var arr = [1,2,3,4,5];   
  22. console.log('数组：',arr);   
  23. //对象   
  24. var obj1 = {   
  25. key1 : 'value1',   
  26. key2 : 'value2',   
  27. key3 : 'value3'   
  28. };   
  29. var obj2 = {   
  30. key6 : 'value4',   
  31. key5 : 'value5',   
  32. key4 : 'value6'   
  33. };   
  34. var obj3 = {   
  35. key9 : 'value7',   
  36. key8 : 'value8',   
  37. key7 : 'value9'   
  38. };   
  39. console.log('对象：',obj1);   
  40. //对象数组   
  41. var objArr1 = [obj1,obj2,obj3];   
  42. var objArr2 = [[obj1],[obj2],[obj3]];   
  43. console.log('对象数组1：',objArr1);   
  44. console.log('对象数组1：',objArr2);   
  45. /*   
  46. 输出：   
  47. 变量：I am a string   
  48. 数组：[1, 2, 3, 4, 5]   
  49. 对象：Object { key1="value1", key2="value2", key3="value3"}   
  50. 对象数组1：[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]   
  51. 对象数组1：[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]   
  52. */   
  53. </script>   
  54. </head>   
  55. <body>   
  56. </body>   
  57. </html>  
标签：

2 条留言  访客：2 条  博主：0 条

  1. 纪涛 2015年12月04日 下午 2:49  -199楼  回复

    嘿嘿。。风格依然是 知更鸟没变。。。

    • smiling 2015年12月04日 下午 3:09  地下1层  回复

      风格最好别变。

给我留言