js调试工具Console命令详解


Posted in Javascript onOctober 21, 2014

一、显示信息的命令

<!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>

效果:

js调试工具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.group("第一组信息");


console.log("第一组第一条:我的XX(https://3water.com)");


console.log("第一组第二条:xxx(http://3water.com)");

console.groupEnd();

    console.group("第二组信息");


console.log("第二组第一条:程序爱好者QQ群: 80535344");


console.log("第二组第二条:欢迎你加入");

    console.groupEnd();

</script>

</body>

</html>

效果:

js调试工具Console命令详解

四、查看对象的信息
 
console.dir()可以显示一个对象所有的属性和方法。
 

<script type="text/javascript">

var info = {

blog:"https://3water.com",

QQGroup:80535344,

message:"程序爱好者欢迎你的加入"

};

console.dir(info);

</script>

效果:

js调试工具Console命令详解

五、显示某个节点的内容
 
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>

效果:

js调试工具Console命令详解

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

<script type="text/javascript">
var result = 1;

console.assert( result );

var year = 2014;

console.assert(year == 2018 );

</script>

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

js调试工具Console命令详解

七、追踪函数的调用轨迹。
 
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>

控制台输出信息:

js调试工具Console命令详解

八、计时功能
 
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

js调试工具Console命令详解
 

九、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>

说明一下,LZ测试时,在All()中未加alert,控制条没有输出,加上了之后,就有了一张性能分析表,暂时不清楚原因,若你知道,可以评论。

js调试工具Console命令详解

Javascript 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
vue 巧用过渡效果(小结)
Sep 22 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
JS中FRAME的操作问题实例分析
Oct 21 #Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 #Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 #Javascript
利用jquery操作Radio方法小结
Oct 20 #Javascript
利用a标签自动解析URL分析网址实例
Oct 20 #Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 #Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 #Javascript
You might like
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
实例讲解PHP表单
2020/06/10 PHP
event.srcElement+表格应用
2006/08/29 Javascript
JS 继承实例分析
2008/11/04 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python访问类中docstring注释的实现方法
2015/05/04 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
深入浅析Python代码规范性检测
2020/07/31 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
程序员跳槽必看面试题总结
2013/06/28 面试题
同学聚会欢迎辞
2014/01/14 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
OpenCV-Python实现轮廓拟合
2021/06/08 Python
电频谱管理的原则是什么
2022/02/18 无线电