文档章节

九个Console命令,让js调试更简单

tpythoner
 tpythoner
发布于 2015/06/28 23:39
字数 513
阅读 471
收藏 43

一、显示信息的命令

 console.log('详情');
 console.error('错误');
 console.warn('警告');


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

 console.log("%d年%d月%d日",2015,6,28);


三、信息分组

console.group("我的信息");
console.log("用户名:tpythoner");
console.log("我的博客:OSCHINA(http://my.oschina.net/tpythoner)");
console.groupEnd();


四、查看对象的信息

  console.dir()可以显示一个对象所有的属性和方法。

 var info = {'username' : 'tpythoner', 'email' : 'admin@gmail.com'};
 console.dir(info);


五、显示某个节点的内容

console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。

<div id="info">
    <p>程序爱好者:tpyhoner</p>
</div>
<script type="text/javascript">
    var info = document.getElementById('info');
    console.dirxml(info);
</script>


六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。

var result = 1;
console.assert(result);
var year = 2015;
console.assert(year == 2016);


1是非0值,是真;而第二个判断是假,在控制台显示错误信息 

七、追踪函数的调用轨迹。

console.trace()用来追踪函数的调用轨迹。

<script type="text/javascript">
/*函数是如何被调用的,在其中加入console.trace()方法就可以了*/
  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);}
</script>


八、计时功能

console.time()和console.timeEnd(),用来显示代码的运行时间。

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


九、console.profile()的性能分析

function doTask(){
  doSubTaskA(1000);
  doSubTaskA(100000);
  doSubTaskB(10000);
  doSubTaskC(1000,10000);
}
function doSubTaskA(count){
  for(var i=0;i<count;i++){}
}
 
function doSubTaskB(count){
  for(var i=0;i<count;i++){}
}
 
function doSubTaskC(countX,countY){
  for(var i=0;i<countX;i++){
    for(var j=0;j<countY;j++){} 
  }
}
console.profile();
doTask();
console.profileEnd();


性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()。


本文转载自:http://bbs.html5cn.org/thread-84358-1-1.html

下一篇: Docker总结
tpythoner
粉丝 2
博文 22
码字总数 6355
作品 0
朝阳
程序员
私信 提问
Java 8 Nashorn 引擎

Java 8 Nashorn 脚本引擎 java8 终于来了.函数式接口,lambda表达式期待很久了.新的武器在手,应该可以玩出新花样. 前两天无意中发现java8 中还带了另外一个有意思的东西. Nashorn 一个javascr...

架构梦想
2014/03/25
0
33
Web移动应用调试工具——Weinre

由于前面介绍的方式不太给力,于是找到了资深的学长问了问,他告诉我有个叫weinre的插件很不错,在进一步了解,发现了这篇文章。 weinre官网:http://people.apache.org/~pmuellr/weinre/do...

Megan_zhou
2013/06/14
0
0
JavaScript Debug 之 Console

简评:只知道 console.log ?是时候提升一下对 console 的认知了。 JavaScript console 是现代浏览器的一种内置功能,它允许开发者: 查看网页上的错误和警告日志。 使用 JavaScript 命令与网...

极小光
2018/06/28
0
0
Android调试神器stetho

概述 关于stetho,最开始是同事推荐的,主要用来通过Chrome的inspect命令来查看数据库数据的。配置好stetho环境后,在浏览器中输入chrome://inspect,找到需要调试的对象,点击inspect即可调...

jdfkldjlkjdl
2018/05/16
0
0
Indium: 在Emacs中使用Chrome调试协议调试JavaScript

日常在Web开发中, 一般都是在Emacs敲好代码中, 打开Chrome测试, 调试的时候直接调用 Chrome 内建的 DevTools/Console 中快速的调试和定位 JavaScript 代码的问题. 一般的都是这样玩的, 在Chr...

ManateeLazyCat
2018/09/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
2
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
2
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0
python到setuptools、pip工具的安装

python安装 基础开发库   apt-get install gcc  apt-get install openssl libssl-dev 安装数据库和开发库   apt-get install mysql-server libmysqld-dev python环境   下载地址...

问题终结者
昨天
6
0
聊聊spring cloud的FeignClientFactoryBean

序 本文主要研究一下spring cloud的FeignClientFactoryBean FeignClientFactoryBean spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/openfeign/FeignClient......

go4it
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部