9个让JavaScript调试更简单的Console命令


Posted in Javascript onNovember 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>

最常用的就是console.log了。

二、占位符

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

<script type="text/javascript">
   console.log("%d年%d月%d日",2011,3,26);
 </script>

效果:

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

效果:

9个让JavaScript调试更简单的Console命令

四、查看对象的信息

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

<script type="text/javascript">
   var info = {
    blog:"http://www.ido321.com",
    QQGroup:259280570,
    message:"程序爱好者欢迎你的加入"
   };   console.dir(info);
</script>

效果:

9个让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>我的博客:www.ido321.com</h3>
   <p>程序爱好者:259280570,欢迎你的加入</p>
  </div>
  <script type="text/javascript">
   var info = document.getElementById('info');   
   console.dirxml(info);  
   </script>
 </body>
 </html>

效果:

9个让JavaScript调试更简单的Console命令

六、判断变量是否是真

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

<script type="text/javascript">
   var result = 1;
   console.assert( result );
   var year = 2014;
   console.assert(year == 2018 );
</script>

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

9个让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>

控制台输出信息:

9个让JavaScript调试更简单的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

9个让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>

输出如图:

9个让JavaScript调试更简单的Console命令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
jQuery中库的引用方法
Jan 06 jQuery
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JS实现吸顶特效
Jan 08 Javascript
Node.js中路径处理模块path详解
Nov 14 #Javascript
JavaScript队列、优先队列与循环队列
Nov 14 #Javascript
JavaScript中setTimeout的那些事儿
Nov 14 #Javascript
jquery css实现邮箱自动补全
Nov 14 #Javascript
JS常用算法实现代码
Nov 14 #Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 #Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 #Javascript
You might like
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
基于python3的socket聊天编程
2020/02/17 Python
如何在sublime编辑器中安装python
2020/05/20 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python实例化对象的具体方法
2020/06/17 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
2015幼儿园新学期寄语
2015/02/27 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
公司岗位说明书
2015/10/08 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
mysql事务隔离级别详情
2021/10/24 MySQL