一、显示信息的方法

最常用的console.log(),一般用来调试。

console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');                                                                                                          

效果:

二、占位符

console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o

console.log("%d年%d月%d日",2011,3,26);

效果:

三、信息分组

console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();

效果:

四、查看对象的信息

var obj = {
name: 'ali',
age: '20',
showName: function () {
alert(this.name);
}
}
console.dir(obj);

效果:

五、显示某个节点的内容

var info = document.getElementById('info');
console.dirxml(info);

效果:

六、判断变量是否是真

var result = 1;
   console.assert( result );
   var year = 2014;
   console.assert(year == 2018 );

效果:

七、追踪函数的调用轨迹

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);}

效果:

八、计时功能

console.time("控制台计时器一");
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){}
}
console.timeEnd("控制台计时器一");

效果:

九、的性能分析

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();

效果:

chrome貌似不起作用,盗了一张firebug的图...

js调试工具console方法详解的更多相关文章

  1. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  2. js调试工具Console命令详解——转

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

  3. Js apply call方法详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  4. JS之console.log详解以及兄弟姐们邻居方法扩展

    console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...

  5. JS进阶篇--JS数组reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...

  6. JS数组reduce()方法详解及高级技巧

    1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...

  7. Js apply call方法详解【转】

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  8. js cookie使用方法详解

    代码如下 复制代码 <script>function getCookie(c_name){ if (document.cookie.length>0){ //先查询cookie是否为 ...

  9. js数组sort方法详解

    在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子: var arr1 = [6, 3, 4, 1, 2, 5, ...

随机推荐

  1. [onethink ucenter] 跨域名单点登录关键点

    1.uc_client/data/cache/apps.php <?php $_CACHE['apps'] = array ( 1 => array ( 'appid' => '1' ...

  2. Codeforces Round #196 (Div. 1) 题解

    (CF唯一不好的地方就是时差……不过还好没去考,考的话就等着滚回Div. 2了……) A - Quiz 裸的贪心,不过要用矩阵乘法优化或者直接推通式然后快速幂.不过本傻叉做的时候脑子一片混乱,导致WA ...

  3. POJ2068 Nim 博弈论 dp

    http://poj.org/problem?id=2068 博弈论的动态规划,依然是根据必胜点和必输点的定义,才明白过来博弈论的dp和sg函数差不多完全是两个概念(前者包含后者),sg函数只是mex ...

  4. 【计算几何】【bitset】Gym - 101412G - Let There Be Light

    三维空间中有一些(<=2000)气球,一些光源(<=15),给定一个目标点,问你在移除不超过K个气球的前提下,目标点所能接受到的最大光照. 枚举每个光源,预处理其若要照射到光源,需要移走哪 ...

  5. Java异步编程——深入源码分析FutureTask

    Java的异步编程是一项非常常用的多线程技术. 之前通过源码详细分析了ThreadPoolExecutor<你真的懂ThreadPoolExecutor线程池技术吗?看了源码你会有全新的认识&g ...

  6. 使 PHP 写的网站看上去像 asp 页面

    # 使 PHP 代码看上去像 asp 页面 更改Apache 的httpd.conf中AddType application/x-httpd-php .php .phtml改为 AddType app ...

  7. keytool工具生成自签名证书并且通过浏览器导入证书

    1.生成服务器证书库 keytool -genkey -alias tomcat -keypass changeit -keyalg RSA -keysize 1024 -validity 365 - ...

  8. 使用Python SocketServer快速实现多线程网络服务器

    Python SocketServer使用介绍 1.简介: SocketServer是python的一个网络服务器框架,可以减少开发人员编写网络服务器程序的工作量. SocketServer总共有4个 ...

  9. Android Studio导入第三方库的三种方法

    叨叨在前 今天在项目中使用一个图片选择器的第三方框架——GalleryFinal,想要导入源码,以便于修改,于是上完查找了一下方法,想到之前用到过其他导入第三方库的方法,现在做个小总结,以防忘记. A ...

  10. Android内存优化1 了解java内存分配 1

    开篇废话 今天我们一起来学习JVM的内存分配,主要目的是为我们Android内存优化打下基础. 一直在想以什么样的方式来呈现这个知识点才能让我们易于理解,最终决定使用方法为:图解+源代码分析. 欢迎访 ...