一、显示信息

  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>

三、信息分组

  1. <script type="text/javascript">
  2. console.group("我是第一组");
  3.  
  4.     console.log("111");
  5.  
  6.   console.groupEnd();
  7.  
  8.    console.group("我是第二组");
  9.  
  10.     console.log("222");
  11.  
  12.    console.groupEnd();
  13. </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>

六、判断变量是否为真

  1. <script type="text/javascript">
  2.   var result = 0;
  3.   console.assert( result );
  4.   var year = 2016;
  5.   console.assert(year == 2018 );
  6. </script>

七、追踪函数的调用轨迹

  1. <script type="text/javascript">
  2.   function foo(a,b){
  3. console.trace();
  4.     return a+b;
  5.   }
  6.   var x = foo3(1,1);
  7.   function foo3(a,b){return foo2(a,b);}
  8.   function foo2(a,b){return foo1(a,b);}
  9.   function foo1(a,b){return foo(a,b);}
  10. </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>

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

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

  1. 【F12】Console命令,让js调试更简单

    Console命令,让js调试更简单 一.显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("informa ...

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

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

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

    Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些基本用法.今天,继续介绍它的高级用法. ======= ...

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

    http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上 ...

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

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

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

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

  7. 【F12】九个Console命令,让js调试更简单

    一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>     &l ...

  8. 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)

    现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...

  9. 使用Console命令调试JS

    一.console 的对象常用的方法 1.console.log(object[, object, ...])使用频率最高的一条语句:向控制台输出一条消息.支持 C 语言 printf 式的格式化输出 ...

随机推荐

  1. 用VS Code写Python程序

    安装python 常见的Linux发行版本中已经安装了python,而且可能不止一个版本,以Ubuntu14.04为例,预装的python有2个版本,分别是2.7.6和3.4.3,python2和py ...

  2. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  3. Web API项目中使用Area对业务进行分类管理

    在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...

  4. 【趣味分享】C#实现回味童年的24点算法游戏

    一.24点游戏玩法规则效果展示 1.初始化界面 2.开始游戏界面 3.游戏超时界面 4.查看答案界面 5.答对界面 6.答错界面 7.计算表达式的验证界面 8.一副牌算完开始新一副牌界面 到这里24点 ...

  5. C#开发微信门户及应用(25)-微信企业号的客户端管理功能

    我们知道,微信公众号和企业号都提供了一个官方的Web后台,方便我们对微信账号的配置,以及相关数据的管理功能,对于微信企业号来说,有通讯录中的组织架构管理.标签管理.人员管理.以及消息的发送等功能,其中 ...

  6. Monkey Patch/Monkey Testing/Duck Typing/Duck Test

    Monkey Patch Monkey Testing Duck Typing Duck Test

  7. C#、JAVA操作Hadoop(HDFS、Map/Reduce)真实过程概述。组件、源码下载。无法解决:Response status code does not indicate success: 500。

    一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...

  8. 面向对象设计模式纵横谈:Abstract Factory 抽象工厂模式(笔记记录)

         今天是设计模式的第二讲,抽象工厂的设计模式,我们还是延续老办法,一步一步的.演变的来讲,先来看看一个对象创建的问题. 1.如何创建一个对象 常规的对象创建方法: 这样的创建对象没有任何问题, ...

  9. 【JS基础】DOM操作

    appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值

  10. 关getClass().getClassLoader()

    InputStream   is   =   getClass().getClassLoader().getResourceAsStream("helloworld.properties&q ...