你在浏览网页的时候,是否注意过这些网页的控制台输出了什么?

Console这种东西,其实一般只有前端工作者才会注意到。console在我们实际开发中可是个宝贝,他是各种error和warning的展示窗口,通过console我们才能知道自己的网页出了什么毛病,虽然我想吐槽的是,有的时候没毛病它会爆一堆红,(懵逼脸)有问题的时候又干干净净。不管怎么说,它可以展示信息。并且在很久的一段时间,我对console的理解也就如此,知道有一次我点开百度,想看源码的时候不小心瞄到了:

卧槽,厉害了呀。我咋没想到呢,当时就给机智的百度点个赞。然后下意识的打开了天猫,摁下f12:

惊呆了好吧~~一家比一家脑洞清奇,天猫还良心的给不小心打开控制台的小白警告,业界良心哇!

相似的还有如下:

这样的O__O"…:

12306:

城会玩:

当然也有这样式的,调试用的console.log忘记删了吧:

以前我咋没发现console还能这么玩呢,简直是打开了新世界的大门啊。看了一下这些网站这部分的代码,大概知道怎么个玩法了~~

不过写到这里已经快下班了,就不详细说了,上一张图搞定一切:

这是代码:

    console.log("%c好神奇呀~","font-size:30px;color:white;background:deeppink;border-radius:2px;")
console.log("%c哇哇哇哇哇!","font-size:30px;background:linear-gradient(to bottom,deeppink,pink,orange);;border-radius:4px;")
console.log("%c看兔斯基!!!","font-size:30px;color:white;text-shadow:2px 2px 1px gold") console.log("%c","padding:120px 120px;line-height:100px;background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487679947503&di=089b71b243d7805692f6af9fea7247ba&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fblog%2F201408%2F20%2F20140820122446_kHVcj.gif') no-repeat")

ok,收工回家~

关于Console控制台输出的玩法的更多相关文章

  1. Spring Boot2解决idea console 控制台输出乱码

    Idea默认配置是采用GBK, 而项目工程文件采用的是UTF-8. 编码不一致,导致idea Console控制台输出乱码. 网上的解决方案,大都是直接修改Settings=>Editor=&g ...

  2. 代码调试console对象的花式玩法

    转自阮一峰http://www.ruanyifeng.com/home.html console.log(),console.info(),console.debug() console.log方法用 ...

  3. Chrome 控制台新玩法-向输出到console的文字加样式

    Chrome 控制台新玩法-向输出到console的文字加样式 有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字 ...

  4. Chrome 控制台新玩法-console显示图片以及为文字加样式

    有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...

  5. 【转】Chrome 控制台新玩法-console显示图片以及为文字加样式

    在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台 ...

  6. js控制台输出console

    介绍: js的console你可以在firefox的firedbug或者ie和google的f12调试模式下看到,这些主流浏览器的调试模式的控制可以输出一些信息,你的一些js代码测试可以直接在cons ...

  7. 控制台屏蔽某console的输出

    有时候需要调试一个在线网站. 打开 chrome 控制台,其中有一些 console.log 不停的输出. 这样的话就影响了我们使用控制台调试页面. 那么怎样不让那一句(或多句)console.log ...

  8. 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  9. PHP内置Web Server探究(二)自定义PHP控制台输出console函数

    我们在开发APP的服务器端,当和APP进行联调时通常需要实时跟踪URL请求和参数的接收情况. 但PHP并没有像Python或Java专有的控制台输出函数,Python的print()和Java的Sys ...

随机推荐

  1. ubuntu 16.04 php 安装curl方法

    先查看自己的php是否已经安装了curl.方法如下:1.在web服务器目录( Ubuntu下的通常为 /var/www )新建test.php文件2.编辑文件,键入下面一行代码:<?php ph ...

  2. bzoj1562[NOI2009]变换序列——2016——3——12

    任意门:http://www.lydsy.com/JudgeOnline/problem.php?id=1562 题目: 对于0,1,…,N-1的N个整数,给定一个距离序列D0,D1,…,DN-1,定 ...

  3. Xcode 之 snippet 代码重用

    1. 选中代码 2. 拖入xcode 右下侧的 snippet 区域 3. 修改名称 4. 修改快捷输入 (shortcut) 5. <#content#> ,可选修改项

  4. 一句话绑定父函数的作用域this

    //如何在返回的函数中绑定父函数的作用域this function bound () { return function () { console.log(this); }.bind(this); } ...

  5. eclipse修改主题配色

    1.Java-->Editor---> Syntax Coloring修改类中的各种代码颜色 2.General-->Editors --->Text Editors

  6. window 2008+apache2.4.4+php5.5+mysql-5.6.12+phpmyadmin4.0.4.1安装过程(参考他人文章基础上加上自己遇到的问题)

    一.window server2008的安装 1.我用U盘安装的,先用UltraISO把server2008刻录到U盘中,过程我搜了一下,帖个地址: http://wenku.baidu.com/vi ...

  7. 解决mysql 1032 主从错误

    1032错误----现在生产库中好多数据,在从库误删了,生产库更新后找不到了,现在主从不同步了,再跳过错误也没用,因为没这条,再更新还会报错 临时解决方案 mysql> stop slave; ...

  8. main函数执行前、后再执行的代码

    一.main结束 不代表整个进程结束  (1)全局对象的构造函数会在main 函数之前执行,          全局对象的析构函数会在main函数之后执行:          用atexit注册的函数 ...

  9. 日期、时间选择器(DatePicker和TimePicker)的功能与用法

    DatePicker和TimePicker是两个比较易用的控件,它们都从FrameLayout派生而来,其中DatePicker供用户选择日期:而TimePicker则供用户选择时间. DatePic ...

  10. Cocoa 新的依赖管理工具:Carthage

    昨天搞了一下pod的安装 因为之前我都是在使用pod来进行第三方库的管理 但是拿到项目之后 竟发现这个前辈是用Carthage 说真的在这之前我从来没有用过这个玩意因为我感觉用POD已经很好了啊 很方 ...