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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
img的onload的另类用法
Jan 10 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
解析js如何获取css样式
Dec 11 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
js实现随机点名器精简版
Jun 29 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
PHP实现简单的计算器
2020/08/28 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
前台文员我鉴定
2014/01/12 职场文书
聘任书模板
2014/03/29 职场文书
销售岗位职责范本
2014/06/12 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
情人节单身感言
2015/08/03 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
数据设计之权限的实现
2022/08/05 MySQL