window.console对象的方法

时间:2022-06-18 06:13:36

.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(第?行) +
+-------+------+--------+------------+------------+------------+------------+------------+-----------------+