• console深入理解


    ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
     
    下面一一介绍: 
    console.log() 用于输出普通信息
    console.info() 用于输出提示性信息
    console.error() 用于输出错误信息
    console.warn() 用于输出警示信息
    console.debug() 用于输出调试信息
    上面的5种方法,都可以使用printf风格的占位符,不过,占位符的种类比较少,只支持字符(%s),整数(%d或%i),浮点数(%f)和对象(%o)四种
     
    console.dirxml() 用来显示网页的某个节点(node)所包含的html/xml代码
    window.onload = function () {
            var mytable = document.getElementById(‘mytable‘);
            console.dirxml(mytable);
        }
     
    console.group() 输出一组信息的开头
    console.groupEnd() 结束一组输出信息
    这两个结合使用输出一组信息
     
    console.assert() 对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台
    var isDebug = false;
    console.assert(isDebug, '为false时输出的log信息。。。')
     
    console.conunt() 统计代码被执行的次数
    function myFunction(){
    console.count("myFunction 被执行的次数")
    }
    myFunction();
    myFunction();
    // myFunction 被执行的次数: 1
    // myFunction 被执行的次数: 2
     
    console.dir() 直接将DOM节点以对象的方式进行输出,也可以输出对象,查看对象的方法和属性
    console.dirxml() 只是输出DOM结构
     
    console.time() 计时开始
    console.timeEnd() 计时结束
    //第一种方法是使用console.time来统计实例化1000000个对象所需的时间
    console.time('Array initialize')
    var array = new Array(1000000);
    for(var i = array.length-1; i > -1; i--){
    array[i] = new Object();
    }
    //第二种方法是用传统的时间差相减来统计的
    console.timeEnd("Array initialize");
    // Array initialize: 150ms
     
    var start = new Date().getTime();
    var array = new Array(1000000);
    for(var i = array.length-1; i > -1; i--){
    array[i] = new Object();
    }
    console.log(new Date().getTime()-start);
    // 160
     
    console.profile() 和 console.profileEnd() 配合使用来查看CPU使用的相关信息。如果没有用上面的方法的话 Profiles面板里没有CPU的相关信息,只有使用该方法后才有
     
    console.timeLine 和 console.timeLineEnd 配合一起记录一段时间轴, 同上面的方法
     
    console.trace() 堆栈跟踪相关的调试
     
     控制台的一些快捷键
    1、方向键盘的上下键
    2、$_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的
    3、$0-$4 代表最近5个你选择过的DOM节点,$0是最近一次点选的DOM节点, $1是上上次点选的DOM节点,最多保存5个,如果不够则返回undefined
    4、Chrome控制台中支持jQuery的选择器,也就是说可以直接$('body')选择DOM节点
    5、copy() 通过此命令可以将在控制台中获取到的内容复制到键贴板
    copy(document.body), 可以任意粘贴到哪
    6、keys(obj) 和 values(obj) 返回属性名和值组成的数组
    7、console.table(obj) 将对象直接生成table,在console中显示
    8、monitor & unmonitor 接收一个函数名作为参数,函数每次被执行了都会在控制台输出一条信息,里面包含了函数名称及执行时所传入的参数, 解除了监视就不在控制台输出信息了
    monitor(sayHello);
    sayHello('angela');
    sayHello('Phoebe');
    unmonitor(sayHello);
    // function sayHello called with arguments: angela
    // function sayHello called with arguments: Phoebe
     
    • $ // 简单理解就是 document.querySelector 而已。
    • $$ // 简单理解就是 document.querySelectorAll 而已。
    • $_ // 是上一个表达式的值
    • $0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
    • dir // 其实就是 console.dir
    • keys // 取对象的键名, 返回键名组成的数组
    • values // 去对象的值, 返回值组成的数组
     
    console.log('%c',"padding:50px 300px;line-height: 120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.git') no-repeat");
    %c应该是占位符的意思吧
     
    console.clear()
  • 相关阅读:
    浅谈UML学习笔记之用例图
    流媒体服务器
    浅谈UML的概念和模型之UML视图
    浅谈UML的概念和模型之UML九种图
    SQL 语法
    吴裕雄--天生自然数据结构:链式队列及基本操作
    吴裕雄--天生自然数据结构:顺序队列
    吴裕雄--天生自然数据结构:队列存储结构
    吴裕雄--天生自然数据结构:链栈及基本操作
    吴裕雄--天生自然数据结构:顺序栈及基本操作
  • 原文地址:https://www.cnblogs.com/wenwenli/p/6483085.html
Copyright © 2020-2023  润新知