JavaScript的console命令使用实例


Posted in Javascript onDecember 03, 2019

这篇文章主要介绍了javascript的console命令使用实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.分类输出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');

JavaScript的console命令使用实例

2.分组输出

console.group('1');
 console.log("1-1");
 console.log("1-2");
console.groupEnd();
console.group('2');
 console.log("2-1");
 console.log("2-2");
console.groupEnd();

JavaScript的console命令使用实例

生成折叠的分组

console.group('1');
 console.log("1-1");
 console.log("1-2");
console.groupEnd();
console.group('2');
 console.log("2-1");
 console.log("2-2");
console.groupEnd();

JavaScript的console命令使用实例

嵌套

console.group('1');
 console.group("1-1");
  console.group("1-1-1");
   console.log('内容');
  console.groupEnd();
 console.groupEnd();
 console.group("1-2");
  console.log('内容');
  console.log('内容');
 console.groupEnd();
console.groupEnd();
console.groupCollapsed('2');
 console.group("2-1");
 console.log('内容');
 console.groupEnd();
 console.group("2-2");
 console.groupEnd();
console.groupEnd();

JavaScript的console命令使用实例

3.表格输出

console.table()将传入的对象,或数组以表格形式输出

var Obj = {
 Obj1: {
  a: "a1",
  b: "b1",
  c: "c1"
 },
 Obj2: {
  a: "a2",
  b: "b2",
  c: "c2"
 },
 Obj3: {
  a: "a3",
  b: "b3",
  c: "c3"
 }
}
console.table(Obj);

JavaScript的console命令使用实例

var Arr = [
 ["a1","b1","c1"],
 ["a2","b2","c2"],
 ["a3","b3","c3"],
]
console.table(Arr);

JavaScript的console命令使用实例

4.查看对象

显示一个对象的所有属性和方法Console.dir()和Console.log()相同

var ss = {
 name: 'AA',
 title: 'title1', 
}
console.log("console.dir(ss)");
console.dir(ss);
console.log("console.log(ss)");
console.log(ss);

JavaScript的console命令使用实例

5.查看节点

Console.dirxml()显示一个对象的所有属性和方法

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flowchart</title>
<meta charset="UTF-8">
</head>
<body>
<div id="sample">
 <div style="width: 100%; display: flex; justify-content: space-between">
 <div id="myPaletteDiv" style="width: 150px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
 <div id="myDiagramDiv" style="flex-grow: 1; height: 720px; border: solid 1px black"></div>
 </div>
</div>
</body>
</html>
<script>
console.log("console.dirxml");
console.dirxml(document.getElementById("sample"));
console.log("console.log");
console.log(document.getElementById("sample"));
</script>

JavaScript的console命令使用实例

6.条件输出

  • 当第一个参数或返回值为真时,不输出内容
  • 当第一个参数或返回值为假时,输出后面的内容并抛出异常
console.assert(true, "see");
console.assert((function() { return true;})(), "see");
console.assert(false, "not see");
console.assert((function() { return false;})(), "not see");

JavaScript的console命令使用实例

7.记次输出

输出内容和被调用的次数

(function () {
 for(var i = 0; i < 5; i++){
  console.count("运行次数:");
 }
})()

JavaScript的console命令使用实例

8.追踪调用堆栈

function add(a, b) {
 console.trace("Add");
 return a + b;
}
function add2(a, b) {
 return add1(a, b);
}

function add1(a, b) {
 return add(a, b);
}
var x = add2(1, 1);

JavaScript的console命令使用实例

9.计时

  • Console.time()中的参数作为计时器的标识,具有唯一性
  • Console.timeEnd()中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间
  • 最多同时运行10000个计时器
console.time("Chrome中循环1000次的时间");
for(var i = 0; i < 1000; i++)
{
}
console.timeEnd("Chrome中循环1000次的时间");

JavaScript的console命令使用实例

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

Javascript 相关文章推荐
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
You might like
打造计数器DIY三步曲(下)
2006/10/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
javascript数组排序汇总
2015/07/07 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
大专生自我评价
2014/01/28 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
大学毕业感言200字
2014/03/09 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
撤诉书怎么写
2015/05/19 职场文书
新教师教学工作总结
2015/08/12 职场文书
开网店计划分析
2019/07/30 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技