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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jquery实现倒计时功能
Dec 28 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue跨域解决方法
Oct 15 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
node版本管理工具n包使用教程详解
Nov 09 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php简单实现数组分页的方法
2016/04/30 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
newxtree.js代码
2007/03/13 Javascript
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
js实现分页功能
2017/05/24 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python实现手机销售管理系统
2019/03/19 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
策划主管的工作职责
2013/11/24 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
保护环境建议书400字
2014/05/13 职场文书
孩子教育的心得体会
2014/09/01 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技