.info(); // 以->信息方式_输出参数对象
.warn(); // 以->警告方式_输出参数对象
.error(); // 以->错误方式_输出参数对象
.log(); // 以->日志方式_输出参数对象
.table(); // 以->表格方式_输出参数对象
.exception(); // 以->异常方式_输出参数对象.异常
.debug(); // 以->排查方式_输出参数对象.排查出来的[错误,漏洞]
.assert(); // 以->真假方式_输出参数对象.真假的结果[假:断言失败,真:输出响应内容]
.dir(); // 以->目录方式_输出参数对象.所有[属性,方法]
.dirxml(); // 以->内容方式_输出参数对象.[html/xml]标签内容
.count(); // 以->计算方式_输出所在位置被执行的次数
.trace(); // 以->记录方式_输出参数对象=>函数.被调用的记录
.group(); // 以->分组方式_输出参数对象
.groupCollapsed(); // 以->分组方式_输出参数对象,与 group() 相同,不过默认是折叠显示
.groupEnd(); // 表明分组结束
.time(); // 开始计时
期间对象(执行的时间)
.timeEnd(); // 结束计时
.profile(); // 开始分析性能
期间对象(时间性能)
.profileEnd(); // 结束分析性能
.timeStamp(); // 时间戳
.clear(); // 清空 console 中所有的信息
---------------------------------------------
显示信息命令函数
console.log(); --日志
console.info(); --信息
console.error(); --错误
console.warn(); --警告
console.debug(); --漏洞
---------------------------------------------
printf占位符: [%s表示一个字符串,%d表示一个整数,%f表示浮点数,%o表示对象,%c表示css样式]
/////////////////////////////////////
<script type='text/javascript'>
console.log("%d年%d月%d日",2016,9,21);
</script>
输出:
2016年9月21日
/////////////////////////////////////
<script type='text/javascript'>
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
</script>
输出:
My name is classicemi. [添加了css样式后的表现的文本]
/////////////////////////////////////
<script type='text/javascript'>
console.log("%c","padding:50px 300px; line-height: 120px; background: url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");
</script>
输出:
样式里的 background背景图
---------------------------------------------
信息分组输出:
console.group();
console.groupend();
/////////////////////////////////////
<script type="text/javascript">
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.ido321.com)");
console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条:程序爱好者QQ群: 259280570");
console.log("第二组第二条:欢迎你加入");
console.groupEnd();
</script>
输出:
第一组信息
第一组第一条:我的博客(http://www.ido321.com)
第一组第二条:CSDN(http://blog.csdn.net/u011043843)
第二组信息
第二组第一条:程序爱好者QQ群: 259280570
第二组第二条:欢迎你加入
---------------------------------------------
对象目录信息:
console.dir();
可以显示一个对象所有的属性和方法。
/////////////////////////////////////
<script type='text/javascript'>
var info={
blog:"http://www.ido321.com",
QQGroup:259280570,
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>
输出:
blog "http://www.ido321.com"
QQGroup 259280570
message "程序爱好者欢迎你的加入"
---------------------------------------------
显示Dom节点内容:
console.dirxml();
用来显示网页的某个节点(node)所包含的html/xml代码。
/////////////////////////////////////
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客:www.ido321.com</h3>
<p>程序爱好者:259280570,欢迎你的加入</p>
</div>
</body>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</html>
输出:
<div id="info">
<h3>我的博客:www.ido321.com</h3>
<p>程序爱好者:259280570,欢迎你的加入</p>
</div>
---------------------------------------------
判断变量是否真假:
console.assert();
用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
/////////////////////////////////////
<script type="text/javascript">
var result = 1;
console.assert( result ); // 为真 true
var year = 2014;
console.assert(year == 2018 ); // 为假 false
</script>
输出:
+断言失败 fileName(第?行)
console.assert(year == 2018 );
---------------------------------------------
追踪函数的调用痕迹及顺序:
console.trace();
用来追踪函数的调用痕迹及顺序。
/////////////////////////////////////
<script type="text/javascript">
/*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
输出:
add() fileName(第?行)
a=1
b=1
add1() fileName(第?行)
a=1
b=1
add2() fileName(第?行)
a=1
b=1
add3() fileName(第?行)
a=1
b=1
.html() fileName(第?行)
---------------------------------------------
计时:
console.time();
console,timeEnd();
/////////////////////////////////////
用来计算区间代码运行的时间戳差值
<script type="text/javascript">
console.time("控制台计时器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");
</script>
输出:
??.??ms fileName(第?行)
---------------------------------------------
性能分析:
console.profile();console.profileEnd();
性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。
/////////////////////////////////////
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
function funcA(count){
for(var i=0;i<count;i++){}
}
function funcB(count){
for(var i=0;i<count;i++){}
}
console.profile('性能分析器');
All();
console.profileEnd();
</script>
输出:
性能分析器(?????.???毫秒, ??次调用)
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ 函数 + 调用 + 百分比 + 占用时间 + 时间 + 平均时间 + 最小时间 + 最大时间 + 文件 +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ All + 1 + 99.77% + 1161.864ms + 1164.492ms + 1164.492ms + 1164.492ms + 1164.492ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ funcA + 10 + 0.14% + 1.635ms + 1.635ms + 0.163ms + 0.098ms + 0.466ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+
+ funcB + 1 + 0.09% + 0.993ms + 0.993ms + 0.993ms + 0.993ms + 0.993ms + fileName(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+