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 相关信息

chrome devtools tip(2)--自定义代码片段,构建你的工具箱的更多相关文章
- Sublime Text3—Code Snippets(自定义代码片段)
摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用. 平时用sublime安装各种插件,使用Tab键快速补全,便是snippets(可译为代码片 ...
- pycharm自定义代码片段
pycharm自定义代码片段 目录 (一)通用阶段 0 .新建.py文件模板:2 0 .pycharm中添加自定义代码片段:一图全知道:3 1 .定义类:classin 描述 ...
- vscode自定义代码片段,自定义注释片段(动态时间)
下载vscode 一.打开vscode,点击左下角设置图标. 二.点击用户代码片段 三.点击新建全局代码片段文件 四.输入自定义代码片段配置文件名,例如:vue.json 五.进行代码片段配置示例如下 ...
- spring rest docs自定义代码片段
Spring rest docs 文档插件在生成文档时会默认生成6个代码片段,自适应生成其它片段.通过阅读官方文档发现其可以自定义生成的代码片段,但是官方只说了可以自定义模版,修改现有的代码片段的方法 ...
- SQL Prompt自定义代码片段
新增代码片段: 代码片段管理: 代码片段中可以使用以下占位符:详见参考: $DATE$ 插入当前日期. $TIME$ 插入当前时间 $USER$ 插入当前电脑的用户名 $PASTE$ 插入剪切板内容 ...
- VS 2013 中如何自定义代码片段
1.菜单 工具->代码段管理器
- Sublime Text3自定义代码片段
1.打开工具--插件开发--新建代码片段 会出现下图: 2.在<![CDATA[和]]>内写下你要的代码片段,注意的是代码片段要靠最左边. 3.设置快捷键,把下面tabTrigger标签的 ...
- sublime text 2自定义代码片段
本文引用 http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_tex ...
- VS2017自定义代码片段, 实现快捷输入
点击VS2017的工具→代码片段管理器, 下图: 语言选择C#, 路径定位到 Visual C#, 然后复制这个路径在电脑中打开 这里以增加 crk 快捷方式输出 Console.ReadKey()来 ...
随机推荐
- Java中对象创建时的内存分配
一.前言知识铺垫 1.逃逸对象:在一个方法内创建的对象没有被外界引用则称该对象为未逃逸的对象. 2.JDK1.6以后的HotSpot虚拟机支持运行时的对象逃逸分析. 3.JVM中的参数配置: 1) ...
- VS Code中无法识别npm命令
今天在VS Code中执行npm install命令时报了“'npm' 不是内部或外部命令,也不是可运行的程序或批处理文件”的错误. 首先检查环境变量是否配置正常: 系统变量中NODE_PATH,变量 ...
- spring框架对于实体类复杂属性注入xml文件的配置
spring框架是javaWeb项目中至关重要的一个框架,大多web 项目在工作层次上分为持久层.服务层.控制层.持久层(dao.mapper)用于连接数据库,完成项目与数据库中数据的传递:服务层(s ...
- Mysql高手系列 - 第14篇:详解事务
这是Mysql系列第14篇. 环境:mysql5.7.25,cmd命令中进行演示. 开发过程中,会经常用到数据库事务,所以本章非常重要. 本篇内容 什么是事务,它有什么用? 事务的几个特性 事务常见操 ...
- (java实现)顺序表-ArrayList
什么是顺序表 顺序表是在计算机内存中以数组的形式保存的线性表,是指用一组地址连续的存储单元依次存储数据元素的线性结构. 在使用顺序表存储数据前,会先申请一段连续的内存空间(即数组),然后把数组依次存入 ...
- TCP通信 -C/S中的Socket与ServerSocket
客户端类:Socket类 TCP通信的客户端:向服务器发送连接请求,给服务器发送数据,读取服务器的数据,两次IO流 java.lang.Object 继承者 java.net.Socket 构造方法: ...
- Spring 梳理-传递模型数据到视图
传递model,返回string,不指定返回key package com.jt; import com.myOrg.DeptUserDomain; @Controller @RequestMappi ...
- @Data注解getset不起作用
在idea的setting安装Lombok插件,重启idea
- idea springBoot 配置devtools实现热部署
1.pom文件依赖引入 <dependencies> <dependency> <groupId>org.springframework.boot</grou ...
- python process
原文:https://www.cnblogs.com/LY-C/p/9145729.html 使用process模块可以创建进程 from multiprocessing import Process ...