深入分析javascript中console命令


Posted in Javascript onAugust 14, 2016

一、显示信息的命令

代码如下:

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

深入分析javascript中console命令

最常用的就是console.log了。

二:占位符

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

代码如下:

<script type="text/javascript">
console.log("%d年%d月%d日",2016,8,20);
</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/javascript">
 console.group("第一组信息");


console.log("第一组第一条:我的技术博客(https://segmentfault.com/u/learnme)");



console.log("第一组第二条:我的gitHub(https://github.com/specialCoder/)");


console.groupEnd();


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



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



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


 console.groupEnd();
</script>
</body>
</html>

效果:

深入分析javascript中console命令

四、查看对象的信息

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

<script type="text/javascript">
var info = {
blog:"https://segmentfault.com/u/learnme/",
gitHub:"https://github.com/specialCoder/",
message:"程序爱好者欢迎你的加入"
};
console.dir(info);
</script>

效果:

深入分析javascript中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>我的博客:https://segmentfault.com/u/learnme/
<p>程序爱好者,欢迎你的加入</p>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>

效果:

深入分析javascript中console命令

六、判断变量是否是真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
Assert(断言)是一个很好的用于保证程序正确性的特性。在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现。

代码如下:

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

console.assert( result );

var year = 2014;

console.assert(year===2018,"Assertion failed");
</script>

在console.assert()语句中,第一个参数为需要进行assert的结果,正常情况下应当为true;第二个参数则为出错时在控制台上打印的错误信息。

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

显示结果:

深入分析javascript中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>

控制台输出信息:

深入分析javascript中console命令

八、计时功能

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

<script type="text/javascript">
console.time("计数1000*1000");

for(var i=0;i<1000;i++){


for(var j=0;j<1000;j++){}

}

console.timeEnd("计数1000*1000");
</script>

运行时间是10.64ms

深入分析javascript中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>

深入分析javascript中console命令

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

Javascript 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
详解Document.Cookie
Dec 25 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
Vue.js 表单校验插件
Aug 14 #Javascript
Vue.js学习笔记之 helloworld
Aug 14 #Javascript
详解Node.js如何开发命令行工具
Aug 14 #Javascript
javascript中的 object 和 function小结
Aug 14 #Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 #Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 #Javascript
You might like
中东人咖啡哲学
2021/03/03 咖啡文化
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
浅谈php://filter的妙用
2019/03/05 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
numpy 声明空数组详解
2019/12/05 Python
python 伯努利分布详解
2020/02/25 Python
解决Python安装cryptography报错问题
2020/09/03 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
致跳远运动员广播稿
2014/02/11 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书