深入分析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 相关文章推荐
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
简单实现jquery焦点图
Dec 12 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 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/02 无线电
php将文本文件转换csv输出的方法
2014/12/31 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
对pyqt5之menu和action的使用详解
2019/06/20 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python实现自动清理重复文件
2020/08/24 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
函数指针的定义是什么
2016/08/14 面试题
师范生教师实习自我鉴定
2013/09/27 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
收款委托书
2014/10/14 职场文书
布达拉宫导游词
2015/02/02 职场文书
观后感格式
2015/06/19 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Python开发简易五子棋小游戏
2022/05/02 Python