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()

时间: 2024-10-09 08:45:40

console深入理解的相关文章

javascript知识整理之this

js中的this是一个头疼的问题,尤其对于笔者这种初级的菜鸟来讲,下面梳理下this的知识,可以当做是初级进阶也好入门也罢,总归输出的才是自己掌握的: Js中this不是由词法作用域决定的 而是调用时动态指定,这就有点麻烦了,如果不能明确知道函数调用时的词法作用域this的指向也就只能靠猜了,算一卦这种模式不是不推荐而是根本不能用,要是真的不能确定this指向 可以查一下调用栈 或是上个断点之类的,当然alert这种较为原始的方法也是有效的不过确实有点low; Js函数调用方式大致可以归为四类(

Unity游戏开发之路上的那些坑——NullReferenceException

NullReferenceException 这是什么意思,原谅我英语不好,看来要好好学学英语了,一门让我又爱又恨的学科. 空引用异常,暂且就这样翻译吧,不要在意,这都不是事,今天要说的这个才是重点,也是我在码代码过程中遇到的一些坑吧,哎,就想当年犯下的错,暂且一记,给以后留个纪念,哈哈,说的有点煽情了,都是废话,现在进入正题: 开始我想先来一个图,如下: 东西做的有点low,勉强能看吧,主要是屏幕上的两个按钮,button1就是创建一个Cube,button2就是为这个物体创建一个Rigidb

控制台console输出信息原理理解

Eclipse控制台输出信息的控制 标签: Eclipse控制台输出信息 2015-01-02 14:11 22454人阅读 评论(1) 收藏 举报  分类: Some Tips(15)  版权声明:本文为博主原创文章,未经博主允许不得转载. 当你在Eclipse中 running/debugging一个应用程序的时候,有关该应用程序的运行调试信息及日志信息都会输出到控制台(console )显示,但是Eclipse只会显示最后一部分的日志信息,如果你的应用程序会产生大量的运行调试信息及日志信息

重写console.log的一些理解

关于重写console.log的方式通常都是这样的: console.log = (function(oriLogFunc){ return function(str) { oriLogFunc.call(console,"hello:"+str); } })(console.log); console.log("dami"); 在这里,通过立即执行函数传入console.log参数,然后返回一个方法,而在返回的方法里面保持了对console.log的引用,这其实是

【转】console.log 用法

转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上co

深入理解javascript的作用域--函数声明为什么会前置

标签: javascript函数对象 这篇博文解决了以下迷惑 函数声明为什么前置 函数声明前置和变量前置优先级问题 为什么js文件开头就可以使用Math,String等库,而不需要导入头文件 1.变量对象VO 变量对象(Variable Object, 缩写为VO)是一个抽象 概念中的"对象",它用于存储执行上下文中的: 1. 变量 2. 函数声明 3. 函数参数 js解释器就是通过变量对象(VO)来找到我们定义的变量和函数的. 举个例子: var a = 10; function t

通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[下]:管道是如何构建起来的?

在<中篇>中,我们对管道的构成以及它对请求的处理流程进行了详细介绍,接下来我们需要了解的是这样一个管道是如何被构建起来的.总的来说,管道由一个服务器和一个HttpApplication构成,前者负责监听请求并将接收的请求传递给给HttpApplication对象处理,后者则将请求处理任务委托给注册的中间件来完成.中间件的注册是通过ApplicationBuilder对象来完成的,所以我们先来了解一下这究竟是个怎样的对象.[本文已经同步到<ASP.NET Core框架揭秘>之中] [

对js中闭包,作用域,原型的理解

前几天,和朋友聊天,聊到一些js的基础的时候,有一种‘好像知道,好像又不不知道怎么讲的感觉’...于是捡起书,自己理一理,欢迎拍砖. 闭包 理解闭包首先要理解,js垃圾回收机制,也就是当一个函数被执行完后,其作用域会被收回,如果形成了闭包,执行完后其作用域就不会被收回. 如果某个函数被他的父函数之外的一个变量引用,就会形成闭包 闭包的作用,就是保存自己私有的变量,通过提供的接口(方法)给外部使用,但外部不能直接访问该变量. 例子(使用闭包): var test=(function(){ var

对TTY的理解,这篇文章不错

原文:http://blog.chinaunix.net/uid-20543672-id-3225777.html 虽然一直做嵌入式Linux,宿主机和开发板通信天天都在用tty设备通信,但是其实自己对TTY设备及终端的概念认识几乎是0.对于Linux内核的终端.tty.控制台等概念的认识很模糊.由于在学习的时候碰到了重定向console的问题,所以借机学习下tty的知识.以下是我对tty的认识总结,信息来源于网络和内核文档.参考资料见文章末尾. tty一词源于Teletypes,或Telety