一、显示信息的方法

最常用的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. java File类 打印目录树状结构(递归)

    import java.io.File; /** * 递归遍历 * */ public class FieTree { public static void main(String[] args) { ...

  2. 记一次Python爬虫开发经历

    为啥要做Python爬虫,是因为我去找电影的某个网站有点坑,它支持tag标签查询自己喜欢的电影,但是不支持双标签或者三标签查询.由于一个电影对应多种类型(tag),这就意味着,我需要进入这个电影介绍界 ...

  3. VMware Workstation的三种网络连接方式

    桥接模式(Bridged).NAT模式(地址转换模式).仅主机模式(Host-Only) 桥接模式就是将主机网卡与虚拟机的网卡利用虚拟网桥进行通信.在桥接的作用下,类似于把物理主机虚拟为一个交换机,所 ...

  4. leetcode88 Merged Sorted Array

    题意:两个已排好序的数组,合并成新的数组. 解题思路:刚开始做题,完全找不到思路,想用最简单的插入法做,提示超时了大概是for用多了哈哈··看了下别人的方法果断佩服,利用好已排序这个特点,从后往前添加 ...

  5. Python使用boto3操作AWS S3中踩过的坑

    最近在AWS上开发部署应用. 看了这篇关于AWS中国区填坑的文章,结合自己使用AWS的经历,补充两个我自己填的坑. http://www.jianshu.com/p/0d0fd39a40c9?utm_ ...

  6. Xamarin.Forms教程Android SDK工具下载安装

    Xamarin.Form的Android SDK工具下载安装 本节将讲解如何下载Xamarin.Form的Android SDK工具,并使用其中的工具管理Android SDK,如何创建模拟器等内容. ...

  7. Android异步消息处理机制(多线程)

    当我们需要执行一些耗时操作,比如说发起一条网络请求时,考虑到网速等其他原因,服务器未必会立刻响应我们的请求,如果不将这类操作放在子线程里去执行,就会导致主线程被阻塞住,从而影响用户对软件的正常使用. ...

  8. express路由和中间件

    路由 简单来说,express路由就是用来处理一些请求,响应一些url地址. var express = require('express'); var app = express(); app.ge ...

  9. mac下使用github 上传代码

    提起github相信大家都不会陌生,在这里就不再赘述了.作为开源代码库以及版本控制系统,使用好了确实会非常受益,再说的势利点,你找工作时给面试官说你经常维护自己的技术博客和github,相信你给他的印 ...

  10. 神勇的产品经理之路系列-10 PD三板斧

    一.三板斧的来源及理解  三板斧 古代长兵器的一种,又名“马战斧”.相传为程咬金所用.斧阔五寸,柄长七尺.用法有劈.砍.剁.搂.截.撩.云.片.推.支等. 比喻义:解决问题的方法不多,但却非常管用. ...