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

1. FSCapture

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

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

1. 屏幕标尺功能

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

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

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

2. 屏幕取色功能

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

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

2. Chrome

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

1. 可以对调试工具进行放大缩小，Ctrl + 0进行复原
2. 可以对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

1. 打开软件，按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(可以导出1倍图、2倍图、3倍图)和Andriod，选择Web，再设置导出路径，按住Shift键，鼠标左键选择多个图层，选择合并导出选中的图层，最后点击导出选中图层

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

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

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

效果图如下：

6.2 常见图片格式

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