1. FSCapture

功能：支持屏幕录制、滚动截图、高清长图、图片编辑、图片转PDF格式、屏幕取色

官网下载是需要收费的，建议大家支持正版

屏幕标尺功能

打开FSCapture软件后，点击设置，再选择屏幕标尺，如下图所示：

出现的屏幕标尺如下图所示，我们选择垂直模式

如下图所示，我们测量行高，右下角是放大后的效果，移动鼠标进行调整，会自动显示当前的px值

屏幕取色功能

打开FSCapture软件后，点击设置，再选择屏幕取色，如下图所示：

鼠标移动到我们需要吸取颜色的地方，点击鼠标左键，复制下图的16进制颜色即可

2. Chrome

通过F12打开谷歌浏览器的调试工具

可以对调试工具进行放大缩小，Ctrl + 0进行复原
可以对CSS的值进行修改，达到调试的效果

3. Emmet语法

能提高我们的开发效率

3.1 HTML部分

输入div*3，再按tab，输出结果如下：

输入ul>li，再按tab，输出结果如下：

输入div+p，再按tab，输出结果如下：
输入.my-class, 再按tab，输出结果如下：

输入p#my-id, 再按tab，输出结果如下：

输入.my-class$*3，再按tab，输出结果如下：

输入div{盒子一}，再按tab，输出结果如下：

3.2 CSS部分

输入w100，再按tab，输出结果如下：

4. IDEA自动格式化代码

先安装Save Actions插件，然后重启IDEA

设置Save Actions的参数如下，点击保存按钮时，就会自动格式化我们的所有代码

5. Snipaster

打开软件，按F1开始截图

2. 如上图所示，可以按Shift切换RGB和十六进制的颜色，按C复制颜色值
3. 按Ctrl + C复制选中的截图；按F3可以将截图置顶于屏幕

6. photoshop

Ctrl + R打开标尺，右键点击标尺，选择像素

可以使用Ctrl和+、-进行放大缩小图片。按住空格键，再按住鼠标左键，可以拖到图片

选择选框，再框选图片，可以进行尺寸的测量

打开取色器，点击图片，就会有16进制的颜色出来

6.1 利用photoshop进行切图

6.1.1 图层切图

第一步：在图层区域，按住shift键，鼠标左键选择需要合并的图层，然后点击鼠标右键，选择合并图层(合并图层快捷键为Ctrl + E)

第二步：鼠标右键点击合并后的图层，选择导出为
第三步：
导出格式选择为png，然后点击导出，选择导出路径，确认即可
导出后的图片，如下图所示：

6.1.2 切片切图

第一步：选择切片工具

第二步：对要导出的部分进行切片框选，然后选择文件菜单

第三步：选择导出，再选择导出为Web所用格式(旧版)
第四步：导出格式选择为JPEG高，再选择储存
第五步：选择导出路径，再选择导出选中的切片
查看导出后的图片，如下图所示：

6.1.3 安装Cutterman插件进行切图

第一步：从Cutterman官网进行下载，解压zip文件，安装exe文件

第二步：重启photoshop

第三步：选择窗口菜单的拓展(旧版)，再选择Cutterman-切图神器

第四步：注册账号，然后登录

第五步：取消IOS和Andriod，选择Web，再设置导出路径，按住Shift键，鼠标左键选择多个图层，选择合并导出选中的图层，最后点击导出选中图层

在导出的路径中，打开图片，效果如下：

如果不想导出整个图层，只想导出图层的一部分，操作如下：

选中要导出的图层，然后选择选取框，再框选需要导出的区域，最后点击导出选中图层

效果图如下：

6.2 常见图片格式

jpg(JPEG)：对色彩的信息保留较好、高清、颜色较多，通常用于产品类的图片
gif：最多只能储存256色，但可以保存透明背景和动画效果，通常用于简单图形和字体，以及一些图片小动画
png：结合了gif和jpg的优点，具有储存形式丰富，能保存透明背景
PSD：photoshop专用格式，可以存放图层、通道、遮罩等，可以直接进行文字复制，获取图片，测量大小和距离

前端开发小工具的使用(FSCapture、Chrome、Emmet语法、IDEA自动格式化代码、Snipaster）相关推荐

web前端开发小工具集合
收集的一些轻量级非常实用的前端开发小工具,以后还会不定期进行更新,现将目前收集的信息列表如下: CSS 3相关 1.CSS3样式生成器:http://www.css88.com/tool/css3 ...
前端开发小工具SuperApp——Ctrl+S自动刷新浏览器
推荐前端开发中一个小工具SuperApp,灰常好用,前端开发的童鞋们,走过路过不要错过啊! 使用SuperApp后,在编辑器中更新页面资源(html,js,css)时,只需按Ctrl+S,浏览器会自动 ...
Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
前端开发必备工具-网页调试工具
前端开发必备工具-网页调试工具在前端开发中我们经常会要调试页面,主要html.css调试和js调试,这里整理一些工具: 一.firefox网页调试插件 1.firefox插件Firebug 主要用于 ...
java前端编程用什么软件_java前端开发的工具
1 java前端开发的工具在实际开发中,Java也有多个应用方向,手机开发.桌面开发.企业级应用开发.嵌入式开发等.所以学好Java,无疑多了一把通往成功大门的钥匙.下面小编给大家说说java前端开 ...
Brackets前端开发IDE工具
Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果支持 ...
非常实用的开发小工具
非常实用的开发小工具在日常的工作学习中,有哪些工具可以提高我们的开发效率,给各位推荐几个: Ditto 这是个开源工具,超级好用. 当我们复制一条内容之后,前一次被复制的内容会被覆盖,我们只能再重新 ...
Go (Golang) 工具之依赖包管理工具goimports | Go语言规范-import规范(导入)排序 |GoLand：设置gofmt与goimports，保存时自动格式化代码
文章目录 Go (Golang) 工具之依赖包管理工具goimports Go语言规范-import(导入)排序什么是goimports 安装和使用 Golang 使用goimports unrec ...
关于WEB前端开发的工具
俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...

前端开发小工具的使用(FSCapture、Chrome、Emmet语法、IDEA自动格式化代码、Snipaster）

目录