chrome devtools tip(2)--自定义代码片断，构建你的工具箱

日常开发中，有些代码片断经常用到的，好比，获取 url 参数，rgb转16进制，打印下当前页面的性能数据，给全部的 span 加个样式， 防抖节流，fetch接口，相似 jquery这样的顺手 选择 dom 节点的库，等等，还有不少不少咱们日常会用到的 utils 工具代码

不少人是每次用到了就去 google 下，下次要用再去找，这样每次都要找，重复又耽搁时间，哪有没有什么办法能把这些代码 存到浏览器的某个地方，要用的时候直接拿出来用，那今天就要讲讲 chrome devtools 的 snippets 功能

如 上面的 GIF 显示，再 sources 面板下面有个 snippets 选项，在左侧创建须要的目录，而后开始写代码就行了

代码写完，右下脚有个 显示 Ctrl+Enter 的键，点击运行，或者使用快捷键，就能够运行代码了，是否是很方便呀

这里的代码 保存下来，下次打开浏览器，代码仍是存在的，这样这里就能够成为你保存各类工具代码的好地方

好比，你如今想看看，当前网站的性能，假设你这里有保存获取性能数据的代码，你就很快的能获取到了，我本身就有保存下来

这里也能够成为你看 github，有好的想法的时候，尝试写段代码的好地方，不用打开编辑器，F12 就能开始干活，方便简单，用 console 面板写代码比较鸡肋，换行就执行了，很是不方便，这个就比较方便了

这么好用的的功能还不心动么，赶忙打开 chrome 试试吧

推荐阅读：

devtools tips: 调试伪类

devtools tips: 执行保存代码片断

Webpack 诞生记

Babel学习系列4-polyfill和transform-runtime的差异

若是你喜欢也能够关注个人 公众号 「chromedev」,专一于 chrome 相关信息