平常开发中,有些代码片段常常用到的,比如,获取 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. 操作DOM会影响WEB应用的性能

    平时在工作中,要优化自己开发的WEB应用的性能,一般是遵循以下几个原则: 1.减少网络请求. 2.压缩.合并静态资源文件,以此来减轻网络传输的带宽压力和资源消耗. 3.代码逻辑层面上的性能优化.比如减 ...

  2. JAVA自学笔记 - 从零开始

    文中记录的内容都是博主从自己的学习笔记中总结的. 如果遇到问题,或者有不一样的看法,欢迎提出! 1安装JDK 从Oracle官网下载JDK,我使用的版本是1.7.0.80. 操作系统是win7 64位 ...

  3. 文章导航-readme

    Spring-Boot Spring Boot(一) Hello World Redis 图解Redis之数据结构篇--简单动态字符串SDS 图解Redis之数据结构篇--链表 图解Redis之数据结 ...

  4. 多智能体系统(MAS)简介

    1.背景   自然界中大量个体聚集时往往能够形成协调.有序,甚至令人感到震撼的运动场景,比如天空中集体翱翔的庞大的鸟群.海洋中成群游动的鱼群,陆地上合作捕猎的狼群.这些群体现象所表现出的分布.协调.自 ...

  5. springboot 集成Redis一主二从三哨兵

    1.Centos7 Redis一主二从三哨兵配置 Redis一主二从三哨兵环境搭建 2.接入过程 与集成redis单机不同的是jedis相关的配置做了修改,JedisPool换成了JedisSenti ...

  6. .net core 3.0 Signalr - 06 业务实现-业务分析

    ## 业务需求 1. 人-项目关系 一个人可以属于多个项目,一个项目可以有多个人加入,通知的时候,可以通知项目内的所有人,也可以通知部分人或者某个责任人. 2. 登录互斥 同一个人不允许登录两次(不同 ...

  7. dedecms5.7最新漏洞修复

    最近发现织梦cms被挂马现象频繁,解决好好几个网站的问题,但是过不了多久,就又被攻击了,即使更改系统及ftp密码,也没有起到防御的作用,最后怀疑cms本身漏洞,于是采用工具扫描了一下,才发现问题的严重 ...

  8. ThinkPHP框架快速开发网站

    使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助 ...

  9. Docker实战笔记命令篇

    拉取一个镜像 docker pull ubuntu:14.04 查看系统中的镜像 docker images 运行镜像并进入 docker run -it ubuntu:14.04 查看运行的容器 d ...

  10. Java 爬虫遇上数据异步加载,试试这两种办法!

    这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...