前端常用插件分享

249 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

theme: github highlight: atelier-savanna-dark

Snipaste

✨ 一个功能非常强大的贴图插件,截图的层级会优先展示在所以窗口上面,按f1(选取截图范围)f3(完成贴图)

截图

  • 和微信截图一样,会显示以像素为单位的宽高

image.png

  • 会显示色值,并且可以复制

image.png

  • 取消截图,按ESC
  • 使用完截图后,图片右击关闭或者销毁

截图支持的操作

  • 图片尺寸的放大缩小,将鼠标放在截图的位置上,滚动鼠标滚轮,进行放大缩小

image.png

  • 图片透明度的调整,按住Alt滚动鼠标滚轮,可以调整图片的透明度

image.png

image.png

🌟 剩下的就不介绍了,等你自己发现

标注

image.png

  • 矩形
  • 椭圆
  • 线条
  • 箭头
  • 铅笔
  • 马克笔
  • 文字
  • 高斯模糊,可以选取圆形或者矩形

image.png 💫 最后附上下载地址:zh.snipaste.com/download.ht… ✏️ 我一般是用来比较自己做出来的网页和设计图是否一致的

uTools

✨ 一个强大的插件管理器

唤起方式

按住CTRL,然后在按空格

image.png

插件市场

image.png

搜索插件

只需要搜索插件的简拼,例剪贴板搜索jt就会出现

image.png

image.png

本人常用插件

image.png

❤️ 这款插件可以将你复制的文本,截图,html等展现在插件里面

image.png 💫 最后附上下载地址:www.u.tools/

✌️ 自己觉得有好用的插件会后续更新这篇文章

whatfont

✨ 一款chrome浏览器的扩展插件

安装

  1. 在Chrome浏览器输入“chrome://extensions/”

image.png 2. 将解压完成的.crx文件拖入里面 image.png image.png

image.png

image.png 3. 使用 点击一下插件,然后向鼠标移到文字上面,会显示字体字号颜色等,文字都是可以复制的

image.png

💫 最后附上下载地址:pan.baidu.com/s/1RvUHycT8… 提取码:q5dm

Window_Resizer

✨ 一款chrome浏览器的扩展插件,特别适合前端开发,用户安装了Window Resizer后,可以使用插件提供的选项来选择浏览器窗口大小,提供了多种常用尺寸可选或自定义窗口大小,为页面适配提高效率。

image.png

安装

直接将.crx文件拖入到扩展程序里面

💫 最后附上下载地址:pan.baidu.com/s/1EI-0V0yf… 提取码:z2m6

在线ps工具

网址:ps.gaoding.com/#/

58dafa65d0324eb4dedf31c704f7c23.jpg

抽奖插件

网址:100px.net/