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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 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
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
DOM相关内容速查手册
2007/02/07 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python中无限元素列表的实现方法
2014/08/18 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python破解zip加密文件的方法
2018/05/31 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python tkinter控件布局项目实例
2019/11/04 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
元旦活动感言
2014/03/08 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
教师年终个人总结
2015/02/11 职场文书
户外拓展训练感想
2015/08/07 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python