简单的浏览器调试——console命令

一、显示信息

1 <script type="text/javascript">
2         console.log(‘hello‘);
3         console.info(‘信息‘);
4         console.error(‘错误‘);
5         console.warn(‘警告‘);
6 </script>

二、占位符

1   <script type="text/javascript">
2             console.log("%d年%d月%d日",2016,11,12);
3     </script>

三、信息分组

<script type="text/javascript">
            console.group("我是第一组");

           console.log("111");

         console.groupEnd();

         console.group("我是第二组");

           console.log("222");

         console.groupEnd();
       </script>

四、查看对象信息

1  <script type="text/javascript">
2             var obj = {
3                 name:"张三",
4                 group:001,
5                 course:"计算机"
6             };
7             console.dir(obj);
8     </script>

五、显示节点内容(包括html/xml)

1     <div id="obj">
2            <p>www.baidu.com</p>
3       </div>
4     <script type="text/javascript">
5            var info = document.getElementById(‘obj‘);
6            console.dirxml(obj);
7     </script>

六、判断变量是否为真

  <script type="text/javascript">
          var result = 0;
          console.assert( result );
          var year = 2016;
          console.assert(year == 2018 );
    </script>

七、追踪函数的调用轨迹

<script type="text/javascript">
      function foo(a,b){
            console.trace();
        return a+b;
      }
      var x = foo3(1,1);
      function foo3(a,b){return foo2(a,b);}
      function foo2(a,b){return foo1(a,b);}
     function foo1(a,b){return foo(a,b);}
   </script>

八、计时功能

1 <script type="text/javascript">
2       console.time("计时器01");
3       for(var i=0;i<999;i++){
4         for(var j=0;j<999;j++){}
5       }
6       console.timeEnd("计时器01");
7   </script>

九、程序性能分析

 1  <script type="text/javascript">
 2           function getAll(){
 3                 alert("hello");
 4              for(var i=0;i<10;i++){
 5                     funcA(1000);
 6                  }
 7             funcB(10000);
 8           }
 9
10          function funcA(count){
11            for(var i=0;i<count;i++){}
12          }
13
14          function funcB(count){
15            for(var i=0;i<count;i++){}
16          }
17
18          console.profile(‘性能分析‘);
19          getAll();
20          console.profileEnd();
21        </script>

浏览器调试新技能,学习之余写到这里备忘~n_n~

时间: 2024-08-03 17:09:39

简单的浏览器调试——console命令的相关文章

【转】九个Console命令,让js调试更简单

一.显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <title>常用console命令</title> 5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6: </head> 7: <body> 8: <script

[转]九个Console命令,让js调试更简单

转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>     <title>常用console命令</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" 

Console命令详解,让调试js代码变得更简单

Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. =================================== Firebug控制台详解 作者:阮一峰出处:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 控制台(Console)是Firebug的第一个面板,也是最重要的面板

[转]Console命令详解,让调试js代码变得更简单

转自 : http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. =================================== Firebug控制台详解 作者:阮一峰出处:http://www.ruanyifeng.com/blog/2011/0

九个Console命令,让 JS 调试更简单

一.显示信息的命令 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>常用console命令</title> 5 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" /> 6 </head> 7 <body> 8 <script type=&quo

九个Console命令,让js调试更简单

一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri

9 个让 JavaScript 调试更简单的 Console 命令

一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri

SocketLog-微信调试、API调试和AJAX的调试的工具,能将日志通过WebSocket输出到Chrome浏览器的console中

说明 SocketLog适合Ajax调试和API调试, 举一个常见的场景,用SocketLog来做微信调试, 我们在做微信API开发的时候,如果API有bug,微信只提示"改公众账号暂时无法提供服务,请稍候再试" ,我们根本不知道API出来什么问题. 有了SocketLog就不一样了, 我们可以知道微信给API传递了哪些参数, 程序有错误我们也能看见错误信息(下方有张图片,可能加载慢,请耐心等待一下) 正在运行的API有bug,不能var_dump进行调试,因为会影响client的调用

使用Console命令调试JS

一.console 的对象常用的方法 1.console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C 语言 printf 式的格式化输出.当然,也可以不使用格式化输出来达到同样的目的 2.console.debug(object[, object, ...])向控制台输出一条信息,它包括一个指向该行代码位置的超链接. 3.console.info(object[, object, ...])向控制台输出一条信息,该信息包含一个表示“