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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
js实现简单扫雷
Nov 27 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
单点登录 Ucenter示例分析
2013/10/29 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php-msf源码详解
2017/12/25 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
python查看微信好友是否删除自己
2016/12/19 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
Pytorch释放显存占用方式
2020/01/13 Python
python实现电子词典
2020/03/03 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python 模拟登陆github的示例
2020/12/04 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
教育学专业实习生的自我鉴定
2013/11/26 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年环卫工作总结
2015/04/28 职场文书
教师节祝酒词
2015/08/11 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python