继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

qq_想太多先生_0
关注TA
已关注
手记 4
粉丝 2
获赞 1

平常开发中,有些代码片段常常用到的,比如,获取 url 参数,rgb转16进制,打印下当前页面的性能数据,给所有的 span 加个样式, 防抖节流,fetch接口,类似 jquery这样的顺手 选择 dom 节点的库,等等,还有很多很多我们平常会用到的 utils 工具代码

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

snippetscode.gif-161kB

如 上面的 GIF 显示,再 sources 面板下面有个 snippets 选项,在左侧建立需要的目录,然后开始写代码就好了

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

这里的代码 保存下来,下次打开浏览器,代码还是存在的,这样这里就可以成为你保存各种工具代码的好地方

比如,你现在想看看,当前网站的性能,假设你这里有保存获取性能数据的代码,你就很快的能获取到了,我自己就有保存下来

performance.png-114.9kB

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

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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP