南强小屋 Design By 杰米

这篇文章主要介绍了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,console,命令

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“JavaScript的console命令使用实例”

暂无JavaScript的console命令使用实例的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。