zoukankan      html  css  js  c++  java
  • Javascript的console.log()用法

    把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到。

    <!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=gb2312" />
    <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>

    附:

    Firebug & Chrome Console 控制台的一些其他功能
    console.log(object[, object, ...])
    使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的:

    var animal='frog', count=10;
    console.log("The %s jumped over %d tall buildings", animal, count);
    console.log("The", animal, "jumped over", count, "tall buildings");
    console.debug(object[, object, ...])
    向控制台输出一条信息,它包括一个指向该行代码位置的超链接。

    console.info(object[, object, ...])
    向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。

    console.warn(object[, object, ...])
    同 info。区别是图标与样式不同。

    console.error(object[, object, ...])
    同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。

    console.assert(expression[, object, ...])
    断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。

    console.dir(object)
    输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。

    console.dirxml(node)
    输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。

    console.trace()
    输出 Javascript 执行时的堆栈追踪。

    console.group(object[, object, ...])
    输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

    console.groupCollapsed()
    同 console.group(); 区别在于嵌套块默认是收起的。

    console.time(name)
    计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。

    console.profile([title])
    与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。

    console.count([title])
    输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。

    console.clear()
    清空控制台

    命令行
    控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍。

    $(id)
    返回一个给定 id 的元素。

    $$(selector)
    返回给定的 css 选择器匹配到的一组元素。

    $x(xpath)
    返回给定的 XPath 表达式匹配到的一组元素。

    $0
    在 HTML 面板中选中的元素。

    $1
    上一次在 HTML 面板中选中的元素。

    $n(index)
    访问最近 5 个被选中过的元素,index 的范围: 0 – 4。

    dir(object)
    同 console.dir(object)。

    dirxml(node)
    同 console.dirxml(node)。

    clear()
    同 console.clear()。

    inspect(object[, tabName])()
    在合适的(或一个指定的) tab 中检视一个对象。

    keys(object)
    返回一个对象的所有属性的键。

    values(object)
    返回一个对象的所有属性的值。

    debug(fn)
    在函数第一行添加一个断点,使用 undebug(fn) 移除断点。

    monitor(fn)
    开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。

    monitorEvents(object[, types])
    开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:

    monitorEvents($0,['click'])
    上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。

    profile([title])
    同 console.profile([title])

    v
  • 相关阅读:
    Markdown
    异异还原
    程序和算法
    运算符
    Java复习1
    复习总结
    为什么Byte是8位,但是却只能表示到127,而不是255?
    笔记的认识
    笔记本触摸板
    电脑热键
  • 原文地址:https://www.cnblogs.com/aipan/p/8360514.html
Copyright © 2011-2022 走看看