Chrome冷知识&黑科技

Chrome浏览器是开发人员的最爱，也在浏览器市场上占有较高的份额，但是他还有很多潜力等着我们去开发，现在最新的V51版本已经基本支持ES6的语法了，根据新闻消息谷歌还声称其将在V52版本提供ES7的支持，所以今天就来聊聊谷歌浏览器中的冷知识吧~

HTML篇

在浏览器地址栏中运行JS代码

在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句.比如：

1
javascript:alert('hello from address bar :)');

将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现.
需要注意的是如果是通过copy paste代码到浏览器地址栏的话，IE及Chrome会自动去掉代码开头的javascript:，所以需要手动添加起来才能正确执行，而Firefox中虽然不会自动去掉，但它根本就不支持在地址栏运行JS代码

浏览器地址栏运行HTML代码

在非IE内核的浏览器地址栏可以直接运行HTML代码！在地址栏输入以下代码然后回车运行，会出现指定的页面内容。

1
data:text/html,<h1>Hello, world!</h1>

浏览器也能当编辑器使

将以下代码贴到地址栏运行后浏览器变成了一个原始而简单的编辑器，与Windows自带的notepad一样，就问你怕不怕。

1
data:text/html, <html contenteditable>

归根结底都是因为HTML5中新加的contenteditable属性，当元素指定了该属性后，元素的内容成为可编辑状态。
同样的道理，将以下代码放到console执行后，整个页面将变得可编辑，随意践踏吧~

1
document.body.contentEditable='true';

页面拥有ID的元素会创建全局变量

在一张HTML页面中，所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量，这意味着document.getElementById像人的阑尾一样显得多余了。但实际项目中最好老老实实该怎么写就怎么写，毕竟常规代码出乱子的机会要小得多。

1
2
3
4
<div id="sample"></div>
<script type="text/javascript">
        console.log(sample); //输出DOM节点
</script>

加载CDN文件时，可以省掉HTTP标识

现在很流行的CDN即从专门的服务器加载一些通用的JS和CSS文件，出于安全考虑有的CDN服务器使用HTTPS方式连接，而有的是传统的HTTP，其实我们在使用时可以忽略掉这个，将它从URL中省去。

1
<script src="//domain.com/path/to/script.js"></script>

利用script标签保存任意信息

将script标签设置为type='text'然后可以在里面保存任意信息，之后可以在JavaScript代码中很方便地获取。

1
2
3
<script type="text" id="template">
	<h1>This won't display</h1>
</script>

1
var text = document.getElementById('template').innerHTML

Console篇

大家都会用log，但鲜有人很好地利用console.error , console.warn等将输出到控制台的信息进行分类整理。
他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。
各个所代表的语义如下：

  • console.log：普通信息
  • console.info：提示类信息
  • console.error：错误信息
  • console.warn：警示信息

当合理使用上述log方法后，可以很方便地在控制台选择查看特定类型的信息。

特技，全都是特技

关于console.log，早已被玩儿坏了。一切都源于Chrome提供了这么一个API：第一个参数可以包含一些格式化的指令比如%c。

1
console.log('%chello world','font-size:25px;color:red;');

没错后面尾行的就是CSS属性，你可以大肆的用牛逼的CSS特效来展示，无论是渐变色还是关键帧动画！

官方给出的表格

Format Specifier Description
%s Formats the value as a string.
%d or %i Formats the value as an integer.
%f Formats the value as a floating point value.
%o Formats the value as an expandable DOM element (as in the Elements panel).
%O Formats the value as an expandable JavaScript object.
%c Formats the output string according to CSS styles you provide.

不过只是有文字怎么够玩，我们可以再加一点图片什么的

1
2
3
4
5
6
console.log(
	"%c", 
	"padding:50px 300px;
	 line-height:120px;
	 background:url("giligili.gif") no-repeat;"
);

除此，console.table 更是直接以表格的形式将数据输出，挺好玩的！

1
2
3
var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; 
console.table(data);
);

其实console还有其他一些方法，但是用的都比较少了，大家感兴趣可以去看看博文chrome控制台膜法师
还有一个神奇的方法获取页面元素，就是在控制台中使用$$选择器，这就相当于是原生querySelectorAll的方法

1
$$("body");

操作实例

1.shadow dom（是什么，封装组件）
2.不可描述