zoukankan      html  css  js  c++  java
  • javascript里的console.log()

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>javascript的console.log()用法</title>
    <script type="text/javascript">
    /*
    console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebugs 之后的 Firefox 所独有的调试“绝招”。
    这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
    今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。于是有人就提供了这样两句代码:
    window.console = window.console || {};
    console.log || (console.log = opera.postError);
    经测试,以上代码好使。
    至此,Firefox/IE/Opera 都能用上 console.log 了。
    当然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log,还是太过简单,比如参数是 Object 或者数组就没有进一步的显示功能。 
    */

    //变量
    var i = 'I am a string';
    console.log('变量:',i);

    //数组
    var arr = [1,2,3,4,5];
    console.log('数组:',arr);

    //对象
    var obj1 = {
        key1 : 'value1',
        key2 : 'value2',
        key3 : 'value3'
    };
    var obj2 = {
        key6 : 'value4',
        key5 : 'value5',
        key4 : 'value6'
    };
    var obj3 = {
        key9 : 'value7',
        key8 : 'value8',
        key7 : 'value9'
    };

    console.log('对象:',obj1);
    //对象数组
    var objArr1 = [obj1,obj2,obj3];
    var objArr2 = [[obj1],[obj2],[obj3]];

    console.log('对象数组1:',objArr1);
    console.log('对象数组1:',objArr2);
    /*
    输出:
    变量:I am a string
    数组:[1, 2, 3, 4, 5]
    对象:Object { key1="value1", key2="value2", key3="value3"}
    对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}]
    对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]]
    */
    </script>

    </head>

    <body>
    </body>
    </html>

    下面加入一些,console的其它方法介绍:

    console.log(object[, object, ...])
    在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。

    第一个参数可以是一个包含格式化占位符输出的字符串,例如:

    console.log("The %s jumped over %d tall buildings", animal, count);

    上面的例子可以用下面的无格式化占位符输出的代码替换:

    console.log( " The " , animal,  " jumped over " , count,  " tall buildings " );

    并且,这两种方式是可以组合使用的。如果使用了格式化占位符,而提供的参数的个数多于占位符的个数,那么,多余的参数会以空格分隔的方式附加在字符串后面,就像:

    console.log( " I am %s and I have: " , myName, thing1, thing2, thing3);

    如果参数是一个Javascript对象,那么在控制台输出的就不是静态文字,而是一个可交互的超链接,点击超链接可以查看该对象的HTML, CSS, Script, DOM窗口,可用格式化字符串%o代替Javascript对象。

    console.log( " Body tag is %o " , document.body);

    格式化字符串列表:

    %s 字符串
    %d, %i 整型(暂不支持数字型)
    %f 浮点型 (暂不支持数字型) 
    %o 链接对象

    console.debug(object[, object, ...])
    在控制台输出一条消息,包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令,就不会出现超链接(和console.log()一样)。

    console.info(object[, object, ...])
    在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。

    console.warn(object[, object, ...])
    在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。

    console.error(object[, object, ...])
    在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。

    console.assert(expression[, object, ...])
    测试表达式expression是否为真。如果不是真,会在控制台写一条消息并抛出异常

    console.dir(object)
    以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似。

    console.dirxml(node)
    输出一个HTML或者XML元素的XML源代码。和你在HTML窗口看到的相似。

    console.trace()
    Prints an interactive stack trace of JavaScript execution at the point where it is called.

    The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.

    console.group(object[, object, ...])
    输出一条消息,并打开一个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令可以嵌套使用。

    console.groupEnd()
    关闭最近一个由console.group打开的块。

    console.time(name)
    创建一个名字为name的计时器,调用console.timeEnd(name)停止计时器并输出所耗时间(毫秒)。

    console.timeEnd(name)
    停止同名的计时器并输出所耗时间(毫秒)。

    console.profile([title])
    打开Javascript性能测试开关。可选参数title会在打印性能测试报告时在报告的开头输出。

    console.profileEnd()
    关闭Javascript性能测试开关并输出报告。

    console.count([title])

    触发一个计数,计数由1开始。可选参数title会在显示计数时在报告的开头输出。

     
     
  • 相关阅读:
    MAC终端配置
    SCIENCE公布125个科学前沿问题
    【Python3】内存释放机制
    【Python3】装饰器
    【Python3】迭代器&装饰器
    【Python3】内置函数
    【Python3】高阶函数
    【Python3】匿名函数
    【Python3】递归函数
    【Python3】嵌套函数
  • 原文地址:https://www.cnblogs.com/fumj/p/2645698.html
Copyright © 2011-2022 走看看