春眠不觉晓，console知多少

gitmilk 发布于2019-08-21 17:14 / 1973人阅读

摘要：未使用，等库引用之后清除控制台的所有输出用于将数据以表格的形式输出。在控制台输出警告信息，用法和一样。

console.log

console.log() 方法主要用来在控制台打印信息。其参数是不定的，可以传递任意多个参数，以逗号分割。

基本用法

console.log("hello");
console.log("hello", "world");
console.log(obj1, obj2, document.getElementsByTagName("div"));

占位符

console.log() 提供了很多占位符，方便我们更加自如的定制我们的打印样式。

样式占位符	作用
%s	字符串占位符
%d 或者 %i	整数占位符
%f	浮点数占位符
%o	可展开的DOM
%O	列出DOM的属性
%c	根据提供的css样式格式化字符串（字符串格式的css样式）

这里仅以%c为例。

console.log("%c javascript", "color: #ff0000; font-size:36px;");

结果如下：

应用场景 制作图画

console.log 除了在控制台打印我们需要的调试信息以外，还可以制作一些图画。
如下（盗图）

上面的图画，当然不是通过手动打出来的，有工具哦，推荐两个：

http://picascii.com/
http://www.degraeve.com/img2txt.php

控制台显示图片

另外，也可以使用console.log在控制台显示图片。

console.log("%c   ", "background: url(https://img.aotu.io/FiLwh8e3l--mGdsJNw3Bm-Z8o_JF) no-repeat center center;font-size:60px;padding:50px 200px;background-size:100% 100%;");

效果如下图：

在控制台通过console.log打印图片，需要注意的是：

1、console.log 不能定义图片，因此借助于css背景图片；
2、console.log 不支持对图片进行width，height设置，但是我们可以通过 font-size,padding,line-height 间接设置宽高，上面的示例也证明了这一点；

展开对象

最后，console.log 借助 JSON.stringify 可以对一个对象进行展开打印：

var obj = {
    name: "lxs",
    size: 20,
    child: [
        {
            name: "ywx",
            size: 0
        },
        {
            name: "hhh",
            size: 1
        }
    ]
};

console.log(JSON.stringify(obj, null, 4));

打印效果如下：

console.time 与 console.timeEnd

console.time 可以开启一个定时器，来跟踪摸一个（或者一组）操作所花费的时间，遇到同样参数的console.timeEnd方法时，会关闭这个定时器，并在浏览器控制台输出所花费的时间。

之前，我们想要知道某一些操作所花费的时间时，通常会这么做：

var start = new Date();
...
...
...
var end = new Date();
console.log(end - start);

但是一个更方便快捷的方式就是使用 console.time 和 console.timeEnd

console.time("cost");
for (var i = 0, j = 0; i < 10000; i++) {
    j++;    
}
console.timeEnd("cost");

结果如下：

$_ 代表上一个语句的执行结果：

快捷引用：$i

代表的是inspect最近选中的5个DOM元素，

$0是最近选中的一次，$1...$4以此类推。这个很有用，在elements面板中单击某个DOM后，在控制台直接输入$0,就是对刚才单击元素的引用。

假设我们有如下DOM结构：

我们依次单击
div#J_content0, div#J_content1, div#J_content2, div#J_content3, div#J_content4, div#J_content5
再看控制台：
控制台中的$0引用的是 div#J_content5，$1引用的是倒数第二次点击的div#J_content4, ... 到$5 的时候报错了，是因为目前支持5个.。

快捷选择器：

$(selector) 与 $$(selector)

这里的$并不是jquery的那个$, 而是浏览器提供的一个 Command Line API.

$(selector)只匹配一个元素，其实是document.querySelector（如果支持）的别名；
$$(selector)返回匹配的所有元素，其实是document.querySelectorAll（如果支持）的别名；

还是上面的DOM结构：

$("div")
$$("div")

结果如下：

刚才说过，这里的$并不是 jquery， zepto等库的$,那是在页面没有引用这些库的情况下，如果页面使用了这些库，那么$就会被覆盖。

未使用jquery，zepto等库：

引用jquery之后：

clear

清除控制台的所有输出

table

console.table 用于将数据以表格的形式输出。

console.table(["apples", "oranges", "bananas"]);

在控制台输出如下：

var names = {
    0: {
        firstName: "michael",
        lastName: "jordan"    
    },
    1: {
        firstName: "bryant",
        lastName: "kobe"
    }
};

console.table(names, ["firstName", "lastName"]);

console.group 与 console.groupEnd

在控制台上新建一个分组，随后打印的内容都会被添加一个缩进，表示该内容属于当前分组，直到遇到console.groupEnd()之后，当前分组结束。

console.group();
console.log(1);
console.log(2);
console.log(3);
console.groupEnd();

console.group();
console.log(4);
console.log(5);
console.log(6);
console.groupEnd();

console.info

在控制台输出通知信息，用法和 console.log 一样。

console.warn

在控制台输出警告信息，用法和 console.log 一样。

console.debug

console.log 的别名。

console.error

在控制台输出错误信息，用法和 console.log 一样。

云服务器 GPU云服务器邓超车晓晓spark console console.log

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89294.html

前端用户体验优化： JS & CSS 各类效果代码段

摘要：前言不定时更新在线预览在线预览的源码部分内容仅兼容内核，其他内核自行查询可控密度的虚线分隔线通过更改值控制密度展示通过各属性及方向转换实现横纵向不同的分隔线文字渐隐春眠不觉晓处处闻啼鸟夜来风雨声花落知多少引导用户下方前言不定时更新在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/op...

ybak 2019-08-02 11:54 评论0 收藏0
前端用户体验优化： JS & CSS 各类效果代码段

摘要：前言不定时更新在线预览在线预览的源码部分内容仅兼容内核，其他内核自行查询可控密度的虚线分隔线通过更改值控制密度展示通过各属性及方向转换实现横纵向不同的分隔线文字渐隐春眠不觉晓处处闻啼鸟夜来风雨声花落知多少引导用户下方前言不定时更新在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/op...

mgckid 2019-08-29 17:09 评论0 收藏0
前端用户体验优化： JS & CSS 各类效果代码段

摘要：前言不定时更新在线预览在线预览的源码部分内容仅兼容内核，其他内核自行查询可控密度的虚线分隔线通过更改值控制密度展示通过各属性及方向转换实现横纵向不同的分隔线文字渐隐春眠不觉晓处处闻啼鸟夜来风雨声花落知多少引导用户下方前言不定时更新在线预览 https://zzyper.github.io/opti... 在线预览的源码 https://github.com/zzyper/op...

AnthonyHan 2019-08-23 12:39 评论0 收藏0
从0到1：微信小程序自选股项目回忆录

摘要：小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只为等待小龙宣布号小程序正式发布的到来。第一次被微信开放平台开发二组团队小程序项目团队当小白鼠各种实验新特性。。导语：我很喜欢小龙的一句话，微信因你而变。是的，把事情做到极致的时候，这个世界就会因你而变。小程序自选股项目团队在长达五个月的时间里经历了太多不为人知的故事，不知通宵了多少个夜晚，只...

feng409 2019-08-20 13:36 评论0 收藏0