一、显示信息的方法

最常用的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. 洛谷P1196 [NOI2002] 银河英雄传说

    #include<cstdio> #include<cstring> #include<cstdlib> #include<cmath> #includ ...

  2. 动若脱兔:深入浅出angr--初步理解符号执行以及angr架构

    一:概论 angr作为符号执行的工具,集成了过去的许多分析方式,它不仅能进行动态符号执行,而且还能进行很多静态分析,他在分析二进制程序中能发挥很大的作用,下面为一些应用: 1:利用符号执行探究执行路径 ...

  3. XML--读写操作

    XML文档的相关操作 1.配置文件:在实际项目开发中,XML作为配置文件是不可取代的(框架中的部分功能可以以注解形式来取代) (1) 不同技术,XML配置文件的作用也不一样. (2) 比如当前和这个阶 ...

  4. CSS 笔记——盒子模型

    2. 盒子模型 在CSS眼中,任何HTML标签对象都是一个矩形,有长度,宽度以及各角的定位坐标,俗称CSS 盒子模型理论. Margin(外边距) - 清除边框外的区域,外边距是透明的. Border ...

  5. [UOJ217]奇怪的线段树

    如果一个节点是$0$但它子树内有$1$那么无解,否则我们只需把那些是$1$但子树内没有其他$1$的节点(这些区间是被定位的区间)都访问一遍即可 根据ZKW线段树定位区间的过程,可以发现一段(从左到右) ...

  6. Web API使用记录系列(三)Web API与Owin

    还好在坚持,今天继续更新第三篇随笔----使用owin来启动WebAPI(这里还是以IIS为宿主,当然也可以使用别的如Console.Windows Server等) 关于OWIN(Open Web ...

  7. java接入极光推送

    直接提供工具类, 调用时直接调用其 sendToRegistrationId() 方法 1 import cn.jiguang.common.resp.APIConnectionException; ...

  8. 给ul下的li加click时间

    $('.province ul li').click(function() {//方法 });

  9. memcached与redis区别

    redis:redis是一个高级的key-value的nosql,它主要是用作存储,这是因为它具有持久化功能,并且它支持很多种的数据类型操作,例如,字符串list,set,zset,hash等数据结构 ...

  10. OpenCV腐蚀与膨胀(Eroding and Dilating)

    腐蚀与膨胀(Eroding and Dilating) 目标 本文档尝试解答如下问题: 如何使用OpenCV提供的两种最基本的形态学操作,腐蚀与膨胀( Erosion 与 Dilation): ero ...