Console命令

一、显示信息的命令

777145-20160910141032129-2030936765

二、点位符:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);

777145-20160910141206551-1909725216

三、信息分组 (console.group(),console.groupEnd())

777145-20160910141307207-216281946

四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)

777145-20160910141426738-396986549

五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)

777145-20160910141623910-593033857

六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真,只有表达式为false时,才输出一条相应作息,并且抛出一个异常)

777145-20160910141732238-1708682523

七、计时功能 (console.time()和console.timeEnd(),用来显示代码的运行时间)

777145-20160910141845504-32611280

八、性能分析performance profile (就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()和console.proileEnd();)

详细的信息在chrome控制台里的”profile”选项里查看

777145-20160910141958957-84051636

九、console.count()统计代码被执行的次数

777145-20160910142250441-1981258369

十、keys和values,要在浏览器里输入

777145-20160910142314988-1073223360

十一、console.table表格显示方法

777145-20160910142355848-1537368736

 

十二、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。

777145-20160910142430504-1813497996

 

十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

777145-20160910142507519-684399550

 

十四、$_命令返回最近一次表达式执行的结果,$0-$4代表了最近5个你选择过的DOM节点

20190117224528

 

十五、利用控制台输出文字,图片,以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;

777145-20160910142724629-65894045

 

输出的结果如下图所示:

canvas

格式化符号 实现的功能
%s 格式化成字符串输出
%d or %i 格式化成数值输出
%f 格式化成浮点数输出
%o 转化成展开的DOM元素输出
%O 转化成JavaScript对象输出
%c 把字符串按照你提供的样式格式化后输入