9个让JavaScript调试更简单的Console命令
一、显示信息的命令
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');
</script>
</body>
</html>
最常用的就是console.log了。
二、占位符
console上述的集中度支持printf的占位符格式，支持的占位符有：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)
<script type="text/javascript">
console.log("%d年%d月%d日",2011,3,26);
</script>
效果：
三、信息分组
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.group("第一组信息");
console.log("第一组第一条:我的博客(http://www.ido321.com)");
console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条:欢迎你加入");
console.groupEnd(); </script>
</body>
</html>
效果：
四、查看对象的信息
console.dir()可以显示一个对象所有的属性和方法。
<script type="text/javascript">
var info = {
blog:"http://www.ido321.com",
QQGroup:259280570,
message:"程序爱好者欢迎你的加入"
}; console.dir(info);
</script>
效果：
五、显示某个节点的内容
console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码。
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>我的博客：www.ido321.com</h3>
<p>程序爱好者:259280570,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>
效果：
六、判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
<script type="text/javascript"> var result = 1; console.assert( result ); var year = 2014; console.assert(year == 2018 ); </script>
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>
运行时间是38.84ms
九、console.profile()的性能分析
性能分析(Profiler)就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
<script type="text/javascript">
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();
</script>
输出如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
深入分析javascript中console命令
一.显示信息的命令 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/ja
-
js调试工具Console命令详解
一.显示信息的命令 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="te
-
Js利用console计算代码运行时间的方法示例
前言 本文主要给大家介绍了关于Js用console计算代码运行时间的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 需求 如果学习前端一定时间以后,就会考虑性能方面的问题.那么问题来了,我们怎么计算出一段代码的运行时间呢? 使用console.log配合Date对象计算 比如,我们计算sort方法排序十万个随机数组成的数组需要用多长时间的话,可以这么写: var arr = []; for(var i=0; i<100000; i++){ arr.push(Math.
-
Javascript调试之console对象——你不知道的一些小技巧
前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志
-
9个让JavaScript调试更简单的Console命令
一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascri
-
灵活使用console让js调试更简单的方法步骤
Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法. 适当使用这些方法可以使调试更容易,更快速,更直观. console.log() 在console.log 中有很多人们意想不到的功能.虽然大多数人使用 console.log(object) 来查看对象,但是你也可以使用 console.log(object, otherObject, string),它会把它们
-
实用Javascript调试技巧分享(小结)
见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡..因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点"偏科"了.下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信. 1. 不要使用alert 首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打
-
简易 Javascript 调试包 Debug包
来看一个简易的 Javascript 调试包:jscript.debug.js,包含两个函数,第一个用来遍历对象的各个属性:第二个是一个通用的 Debug 函数(其实 说'对象'比较'精确些',呵呵),用来规定各种错误级别及其各种提示.错误信息的格式化显示,还是<Javascript 实战>上面的经典例子,先看源码: 复制代码 代码如下: /** * jscript.debug package * This package contains utility functions for help
-
JavaScript实现非常简单实用的下拉菜单效果
本文实例讲述了JavaScript实现非常简单实用的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款实用的JS下拉菜单,鼠标移上菜单就显示出二级菜单,是从其它网站上整理下来的,修改花了不少时间,现在去除了一些无用代码,更简洁了,而且代码兼容性似乎也表现不错,这款两级下拉菜单,基本是由CSS和JavaScript共同实现的,真的挺简洁实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-down-show-menu-code
-
javascript实现非常简单的小数取整功能示例
本文实例讲述了javascript实现非常简单的小数取整功能.分享给大家供大家参考,具体如下: JS核心代码: function truncateNumber(n){ return n|0; } 用法示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS小数取整</title> </head&
-
javascript调试之DOM断点调试法使用技巧分享
有的同学会说,可以使用源代码搜索的办法.的确,对于一个相对简单的页面,这个方法时常奏效.但是,对于构成相对复杂的页面(比如页面嵌入很多脚本文件和片段.使用了大段面向对象的实现.隐藏了实现的代码),可能找起来就不那么顺利了. 在Javascript调试中,我们经常会使用到断点调试.其实,在DOM结构的调试中,我们也可以使用断点方法,这就是DOM Breakpoint(DOM断点). 具体的使用方法: 1. 在Chrome浏览器中,打开开发者工具,先选中一个页面元素,然后点击鼠标右键,依次点击菜单中
-
原生JavaScript实现的简单省市县三级联动功能示例
本文实例讲述了原生JavaScript实现的简单省市县三级联动功能.分享给大家供大家参考,具体如下: 三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动菜单<
-
JavaScript 调试器简介
但是仅从调试的角度来说,这些调试器的功能是完全够用的.其实我更需要的不是一个 JavaScript IDE,而是一个 JavaScript 重构工具,这样可以使我快速地对 JavaScript 组件进行重构,比使用 UltraEdit 进行查找/替换的原始方法效率会提高很多,而且更加安全.其实任何一种没有重构工具的语言的开发效率都是没有办法和 Java 这样的语言(有 Eclipse.IDEA 等等强大的重构工具)相提并论的.共产主义尚未实现,这确实是现实,但是并不意味着我们就一定要等待,就没有