chrome devtools tip(2)--自定义代码片段，构建你的工具箱
平常开发中，有些代码片段常常用到的，比如，获取 url 参数，rgb转16进制，打印下当前页面的性能数据，给所有的 span 加个样式， 防抖节流，fetch接口，类似 jquery这样的顺手 选择 dom 节点的库，等等，还有很多很多我们平常会用到的 utils 工具代码
很多人是每次用到了就去 google 下，下次要用再去找，这样每次都要找，重复又耽搁时间，哪有没有什么办法能把这些代码 存到浏览器的某个地方，要用的时候直接拿出来用，那今天就要讲讲 chrome devtools 的 snippets 功能
![snippetscode.gif-161kB][1]
如 上面的 GIF 显示，再 sources 面板下面有个 snippets 选项，在左侧建立需要的目录，然后开始写代码就好了
代码写完，右下脚有个 显示 `Ctrl+Enter` 的键，点击运行，或者使用快捷键，就可以运行代码了，是不是很方便呀
这里的代码 保存下来，下次打开浏览器，代码还是存在的，这样这里就可以成为你保存各种工具代码的好地方
比如，你现在想看看，当前网站的性能，假设你这里有保存获取性能数据的代码，你就很快的能获取到了，我自己就有保存下来
![performance.png-114.9kB][2]
这里也可以成为你看 github，有好的想法的时候，尝试写段代码的好地方，不用打开编辑器，F12 就能开始干活，方便简单，用 console 面板写代码比较鸡肋，换行就执行了，非常不方便，这个就比较方便了
这么好用的的功能还不心动么，赶紧打开 chrome 试试吧
推荐阅读：
[devtools tips: 调试伪类](https://mp.weixin.qq.com/s?__biz=MzAwOTkzNDc0Mg==&mid=2247483875&idx=1&sn=064b565ef6f4800cb4396bad337bcd95&chksm=9b59431aac2eca0c9fbbc453334523c992261844798890aa82fd8acb1877011c1c94132d366b&token=1442008618&lang=zh_CN#rd)
[devtools tips: 执行保存代码片段](https://mp.weixin.qq.com/s?__biz=MzAwOTkzNDc0Mg==&mid=2247483669&idx=1&sn=59977d18cdb0ee7afb7c47716c59739d&chksm=9b5943ecac2ecafabe410262a90e8e1ba23151cfffd498d4002c52bcfbb87aa8823c97f4d311&scene=21#wechat_redirect)
[Webpack 诞生记](https://mp.weixin.qq.com/s?__biz=MzAwOTkzNDc0Mg==&mid=2247483815&idx=1&sn=035efc8e8e20492ba4ebbe8193289b7d&chksm=9b59435eac2eca4832f58bbb95d2e66819b84569084f8ef194262411d435291cad2ebcf412b9&scene=21#wechat_redirect)
[Babel学习系列4-polyfill和transform-runtime的差别](https://mp.weixin.qq.com/s?__biz=MzAwOTkzNDc0Mg==&mid=2247483775&idx=1&sn=bf76452cb7e414cb467e209eb1e78bff&chksm=9b594386ac2eca90b627dbf4cde087f2f0f67111d8abc17bbaf8c13688bd6d823c230538960b&scene=21#wechat_redirect)
[1]: http://static.zybuluo.com/hucheng91/zhjfgl4tsyx2455zl4d52phv/snippetscode.gif
[2]: http://static.zybuluo.com/hucheng91/6slwftra1ons3z5w4wke4smc/performance.png
如果你喜欢也可以关注我的 公众号 「chromedev」,专注于 chrome 相关信息
最新文章
- PHP命名空间的作用、为什么使用命名空间？
- C++生成二级制文件过程（预处理->编译->链接 ）
- jQuery Danmmu Player 弹幕视频
- iso网络各层协议
- 工作者对象HttpWorkerRequest
- tds 安装找不到已安装的DB2
- 常用的正则表达式（例如：匹配中文、匹配html）（转载）
- Ajax和JavaScript的区别
- OD常用断点
- html5 API
- ios ColorLUT滤镜
- jQuery版本冲突解决办法
- 规范 : login 对象的account
- nodejs的简单爬虫
- cocos2dx - 环境配置，项目创建
- vscode插件解析-BookMark
- 如何随机排序数组？使用多种方式！递归，迭代，洗牌，sort方法！
- Tomcat相关面试题，看这篇就够了！保证能让面试官颤抖！
- Django（二）框架第一篇基础
- POJ 1679 The Unique MST 【判断最小生成树是否唯一】