首页 > 前端 > 谷歌浏览器 —— 控制台的花样玩法

谷歌浏览器 —— 控制台的花样玩法

以往只是用Chrome的控制台console.log()输出调试信息,最近看到一些有趣的控制台输出,又发现了几个hack技能。

一、输出彩色文本

一般console.log()输出的都是黑色的文本,但是Chrome提供了给输出文本自定义样式的功能,它的格式为:

console.log("%c需要输出的信息 ", "css 代码");

例如想要输出彩色文本可以在控制台输入下面代码后回车:

console.log('%c输出彩色文本', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

效果如下图:

2016071713565738

 

二、输出模糊字体

原理同上面一样,给输出文本添加自定义样式即可,添加的css用到的是’text-shadow’属性:

console.log('%c输出模糊字体','color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);font-size:20px;');

效果如下:

2016071714095781

 

三、输出一个表单

console的table()方法提供了输出表单的功能,我们给该方法可以传入一个对象输出:

var data = [{'品名': '手机', '数量': 4}, {'品名': '电脑', '数量': 3}];
console.table(data);

效果如下:

2016071714211132

 

四、随意编辑整个网页

得益于HTML5新特性’contenteditable’,使得添加了该属性的DOM元素变成了可编辑的状态,控制台输入:

document.body.contentEditable='true';

这段代码相当于给’body’添加了可编辑的属性,这就意味着整个网页编辑功能激活,任人糟蹋了嘿~

2016071714451917

 

参考:前端不为人知的一面–前端冷知识集锦 By @刘哇勇


本文标题:谷歌浏览器 —— 控制台的花样玩法
转载请注明出处,欢迎分享