Chrome控制台console的各种用法(方便调试)

1、输出信息

  console.log(‘消息内容!‘); //输出普通信息
  console.info(‘消息内容!‘); //输出提示信息
  console.error(‘消息内容!‘);//输出错误信息
  console.warn(‘消息内容!‘); //输出警告信息

2、数据表格化

  var thisObj = [
    { name: ‘quber‘, email: ‘[email protected]‘, qq: 757200834 },
    { name: ‘xm‘, email: ‘[email protected]‘, qq: 757200833 },
    { name: ‘jack‘, email: ‘[email protected]‘, qq: 757200832 },
    { name: ‘maer‘, email: ‘[email protected]‘, qq: 757200831 }
  ];
  console.table(thisObj);

3、统计代码执行时间

  console.time(‘统计时间‘);

  var count = 0;
  for (var i = 0; i < 999999999; i++) {
    count++;
  }

  console.timeEnd(‘统计时间‘);

4、分组输出信息

  console.group(‘分组1‘);
  console.log(‘分组1-1111‘);
  console.log(‘分组1-2222‘);
  console.log(‘分组1-3333‘);
  console.groupEnd();

  console.group(‘分组2‘);
  console.log(‘分组2-1111‘);
  console.log(‘分组2-2222‘);
  console.log(‘分组2-3333‘);
  console.groupEnd();

5、统计代码执行的次数

  function testFn() {
    console.count(‘当前执行的次数‘);
  }
  testFn();
  testFn();
  testFn();

6、当表达式为false时,输出信息

  var testObj = false;
  console.assert(testObj, ‘当testObj为false时才输出!‘);

7、将对象以树状结构展现

  var thisObj = {
    name: ‘quber‘,
    age: 26,
    fn: function() {
      alert(‘quber‘);
    }
  };
  console.dir(thisObj);

8、展现网页某个节点所包含的所有html/xml代码

  console.dirxml($(‘.kx-frm-gd‘));

9、占位符

  console.log("%d年%d月%d日", 2016, 8, 22);//console支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

源:http://www.cnblogs.com/qubernet/p/5794812.html

时间: 2024-12-25 19:48:25

Chrome控制台console的各种用法(方便调试)的相关文章

Chrome 控制台console的用法(学了之后对于调试js可是大大有用)

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

Chrome 控制台console的用法(转)

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents&q

Chrome 控制台console的用法

原文出处: ctriphire 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chr

[转]Chrome 控制台console的用法

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log 会有一定的了解,心里难免会想调试的时候用 alert 不就行了,干嘛还要用 console.log 这么一长串的字符串来替代 alert 输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上 console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按

【repost】Chrome 控制台console的用法

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. 目前控制台方法和属性有: ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents&q

chrome控制台console方法表

控制台console表达式表 console.clear()/clear() 清空控制台 console.log() 方法可以接受一个或多个表达式作为参数,并将他们的值打印到控制台(可使用CSS样式显示) // %s 字符串格式 // %i 或 %d 整型格式 // %f 浮点格式 // %o DOM节点 // %O JavaScript 对象 // %c 对输出的字符串使用css样式,样式由第二个参数指定. console.dir() 以JavaScript对象的形式打印 console.wa

Chrome 控制台 如何调试javascript

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

Chrome控制台的console详述

Chrome控制台的console详述 在详述之前让我们来看看打开浏览器控制台的方式都有那些吧,毕竟这才是开始. 要想打开谷歌开发者工具,有三种方式 ctrl+shift+i f12 在网页中右击鼠标,点击[审查元素],你会打开浏览器的开发者工具 大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息.如下图所示 现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具

chrome控制台使用(Using the Console)

控制台提供了两个主要的方法给开发者测试网页和应用程序: 通过使用控制台提供的Console API方法来诊断日志信息,比如说:console.log(),console.profile(). 即时响应的命令窗口可以和document以及chrome开发工具相互联调.在控制台可以直接测试表达式,并且可以使用Command Line API提供的方法,比如$()可以查找元素,或者使用profile()来打开CPU分析器. 本文提供关于这两个API的概述和一些基本使用,你也可以直接去Console A