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 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
JS继承定义与使用方法简单示例
Feb 19 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 注释规范
2012/03/29 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
2020/08/12 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
python显示天气预报
2014/03/02 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python基于ID3思想的决策树
2018/01/03 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
django rest framework 过滤时间操作
2020/07/12 Python
聊聊python中的循环遍历
2020/09/07 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
经典而简洁的婚礼主持词
2014/03/13 职场文书
工程材料采购方案
2014/05/18 职场文书
幸福来敲门观后感
2015/06/04 职场文书
win10下go mod配置方式
2021/04/25 Golang
k-means & DBSCAN 总结
2021/04/27 Python
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python