1.分类输出

console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');

2.分组输出

console.group('');
console.log("1-1");
console.log("1-2");
console.groupEnd();
console.group('');
console.log("2-1");
console.log("2-2");
console.groupEnd();

生成折叠的分组

console.groupCollapsed('');
console.log("1-1");
console.log("1-2");
console.groupEnd();
console.groupCollapsed('');
console.log("2-1");
console.log("2-2");
console.groupEnd();

嵌套

console.group('');
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('');
console.group("2-1");
console.log('内容');
console.groupEnd();
console.group("2-2");
console.groupEnd();
console.groupEnd();

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);

var Arr = [
["a1","b1","c1"],
["a2","b2","c2"],
["a3","b3","c3"],
]
console.table(Arr);

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);

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>

6.条件输出

  • 当第一个参数或返回值为真时,不输出内容
  • 当第一个参数或返回值为假时,输出后面的内容并抛出异常
console.assert(true, "see");
console.assert((function() { return true;})(), "see");
console.assert(false, "not see");
console.assert((function() { return false;})(), "not see");

7.记次输出

输出内容和被调用的次数

(function () {
for(var i = ; i < ; i++){
console.count("运行次数:");
}
})()

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(, );

9.计时

  • Console.time()中的参数作为计时器的标识,具有唯一性
  • Console.timeEnd()中的参数来结束此标识的计时器,并以毫秒为单位返回运行时间
  • 最多同时运行10000个计时器
console.time("Chrome中循环1000次的时间");
for(var i = ; i < ; i++)
{
}
console.timeEnd("Chrome中循环1000次的时间");

console.log的格式输出

javascript的console命令的更多相关文章

  1. 9 个让 JavaScript 调试更简单的 Console 命令

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

  2. Chrome console命令整理

    console.dir (这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等 在页面右击选择 审查元素 ,然后在弹出来 ...

  3. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  4. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  5. javascript调试 console

    Console命令详解,让调试js代码变得更简单   Firebug是网页开发的利器,能够极大地提升工作效率. 但是,它不太容易上手.我曾经翻译过一篇<Firebug入门指南>,介绍了一些 ...

  6. 九个Console命令,让 JS 调试更简单

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

  7. 9个Console命令

    九个Console命令,让js调试更简单 By.cllgeek 一.显示信息的命令 1: <!DOCTYPE html> 2: <html> 3: <head> 4 ...

  8. 【F12】九个Console命令,让js调试更简单

    一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>     &l ...

  9. js调试工具Console命令详解——转

    一.显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> < ...

随机推荐

  1. MySQL的MVCC

    基本概念 Multi-Version Concurrency Control 多版本并发控制,MVCC 是一种并发控制的方法,一般在数据库管理系统中,实现对数据库的并发访问:在编程语言中实现事务内存. ...

  2. Scrum卡片层次图

    对照国内的项目管理软件禅道,可以好好感受一下,何为Scrum. 看板则一定要是实物,才有感觉.

  3. [进程]kill 9和15,以及pkill, killall

    转自:https://www.cnblogs.com/liuhouhou/p/5400540.html 大家对kill -9 肯定非常熟悉,在工作中也经常用到.特别是你去重启tomcat时.可是多半看 ...

  4. [shell]shell 中| && || () {} 用法以及shell的逻辑与或非

    转自:https://www.jianshu.com/p/617c1ee1e46e | 运算符 管道符号,是unix一个很强大的功能,符号为一条竖线:"|".用法: command ...

  5. [转]Linux 命令行快捷键

    群里有人问"问个问题,Linux 命令行有没有快捷键一下从行末会到行头?经常敲了很多命令发现忘加 sudo 了,然后把命令删了重新敲一遍". 自己还真不知道怎么操作,只知道历史命令 ...

  6. gulp实例

    前端生产环境的简单部署http://ionichina.com/topic/558a1c1346cb5ff7268cee9d var gulp = require('gulp'); // 引入gulp ...

  7. Android7.0 Doze模式分析(一)Doze介绍 &amp; DeviceIdleController

     參考:http://blog.csdn.net/gaugamela/article/details/52981984 在Android M中.Google就引入了Doze模式.它定义了一种全新的 ...

  8. 【C】——extern

    直接上例子: 1.c #include<stdio.h> int main() { extern int a; a += ; printf("%d\n",a); tex ...

  9. git操作:在CentOS7上面搭建GitLab服务器

    在这篇文章中将要讲解如何在CentOS7上面搭建本地的GitLab服务器. 一.安装并配置必要的依赖关系 首先要在CentOS系统上面安装所需的依赖:ssh.防火墙.postfix(用于邮件通知).w ...

  10. SpringCloud 详解配置刷新的原理 使用jasypt自动加解密后 无法使用 springcloud 中的自动刷新/refresh功能

    之所以会查找这篇文章,是因为要解决这样一个问题: 当我使用了jasypt进行配置文件加解密后,如果再使用refresh 去刷新配置,则自动加解密会失效. 原因分析:刷新不是我之前想象的直接调用conf ...