平常开发中,有些代码片段常常用到的,比如,获取 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 相关信息

![](https://img2018.cnblogs.com/blog/1740281/201910/1740281-20191027204920618-2000224756.jpg)

chrome devtools tip(2)--自定义代码片段,构建你的工具箱的更多相关文章

  1. Sublime Text3—Code Snippets(自定义代码片段)

    摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用. 平时用sublime安装各种插件,使用Tab键快速补全,便是snippets(可译为代码片 ...

  2. pycharm自定义代码片段

    pycharm自定义代码片段 目录 (一)通用阶段 0 .新建.py文件模板:2 0 .pycharm中添加自定义代码片段:一图全知道:3 1 .定义类:classin              描述 ...

  3. vscode自定义代码片段,自定义注释片段(动态时间)

    下载vscode 一.打开vscode,点击左下角设置图标. 二.点击用户代码片段 三.点击新建全局代码片段文件 四.输入自定义代码片段配置文件名,例如:vue.json 五.进行代码片段配置示例如下 ...

  4. spring rest docs自定义代码片段

    Spring rest docs 文档插件在生成文档时会默认生成6个代码片段,自适应生成其它片段.通过阅读官方文档发现其可以自定义生成的代码片段,但是官方只说了可以自定义模版,修改现有的代码片段的方法 ...

  5. SQL Prompt自定义代码片段

    新增代码片段: 代码片段管理: 代码片段中可以使用以下占位符:详见参考: $DATE$ 插入当前日期. $TIME$ 插入当前时间 $USER$ 插入当前电脑的用户名 $PASTE$ 插入剪切板内容 ...

  6. VS 2013 中如何自定义代码片段

    1.菜单 工具->代码段管理器

  7. Sublime Text3自定义代码片段

    1.打开工具--插件开发--新建代码片段 会出现下图: 2.在<![CDATA[和]]>内写下你要的代码片段,注意的是代码片段要靠最左边. 3.设置快捷键,把下面tabTrigger标签的 ...

  8. sublime text 2自定义代码片段

    本文引用   http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_tex ...

  9. VS2017自定义代码片段, 实现快捷输入

    点击VS2017的工具→代码片段管理器, 下图: 语言选择C#, 路径定位到 Visual C#, 然后复制这个路径在电脑中打开 这里以增加 crk 快捷方式输出 Console.ReadKey()来 ...

随机推荐

  1. PTA A1007&A1008

    第四天 A1007 Maximum Subsequence Sum (25 分) 题目内容 Given a sequence of K integers { N1, N2, ..., NK }. A ...

  2. Kubernetes 从懵圈到熟练:集群服务的三个要点和一种实现

    作者 | 声东 阿里云售后技术专家 文章来源:Docker,点击查看原文. 以我的经验来讲,理解 Kubernetes 集群服务的概念,是比较不容易的一件事情.尤其是当我们基于似是而非的理解,去排查服 ...

  3. Java I/O系统学习四:标准IO

    几乎所有学习Java的同学写的第一个程序都是hello world,使用的也都是System.out.println()这条语句来输出"hello world",我也不例外,当初学 ...

  4. HTML文档简介

    HTML简介 HTML标签 html文档标签: html源代码就好像word文档,有特殊的语法结构定义自己的功能. html文档标签 html标签,其下由两个主要节点标签head.body. head ...

  5. [C++]类的设计(2)——拷贝控制(拷贝控制和资源管理)

      1.类的行为分类:看起来像一个值:看起来想一个指针.     1)类的行为像一个值,意味着他应该有自己的状态.当我们拷贝一个像值的对象时,副本和原对象是完全独立的.改变副本不会对原有对象有任何影响 ...

  6. jenkins自动化部署项目2 --插件的选择和安装

    一.安装插件: 我选择的安装建议的插件,也可以自定义安装自己想要的插件,在不敢保证自己确定要用的插件是完全正确的情况下建议按推荐安装 我理解的jenkins+tomcat完成自动化部署maven项目需 ...

  7. SQL数据库各种查询建表插入集合-待续持续更新

    创建表 drop table student; DROP table Course; DROP table sc; CREATE TABLE student ( sid integer PRIMARY ...

  8. CentOS 8 正式发布

    转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net] 本文地址:https://www.oschina.net/news/110111/centos-8-re ...

  9. java8泛型

    目录 1,泛型中的相关操作符 2,泛型基本使用示例 3,通配符 3.1, T和?的区别 3.2,上下界通配符 4, 附加约束(&) ​ 泛型,也就是将类型参数化,然后在使用类或者方法的时候可以 ...

  10. Eureka参数调优

    1.常见问题 1.为什么服务下线了,Eureka Server接口返回的信息还会存在? 2.为什么服务上线了,Eureka Client不能及时获取到? 3.为什么偶尔会有如下提示: EMERGENC ...