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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
web前端开发也需要日志
Dec 09 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
vue 避免变量赋值后双向绑定的操作
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 数组使用详解 推荐
2011/06/02 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
详解Python 函数参数的拆解
2020/09/02 Python
python中实现栈的三种方法
2020/12/19 Python
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
C++的几个面试题附答案
2016/08/03 面试题
某科技软件测试面试题
2013/05/19 面试题
会计专业自荐信
2013/12/02 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android