前端工程师月薪上万的秘密

    前端快捷操作汇总

1. Sublime Text3 快捷方式

需要安装emmet插件：先安装package control，参考官网安装package install，之后在窗口中输入emmet进行安装，安装好后按Ctrl+e检验有效性，如果报错，根据提示解决插件问题

 

1. 生成标签 直接输入标签名按Tab键

2. 生成多个同名标签， 例如 div*3 再按tab键

3. 如果有父子关系，使用ul>li, 按tab键。ul>li*5

4. 如果是同级标签：使用div+span，按tab键。  div+p*5

5. 如果已经定义类选择器，生成带有类名或者id名字的标签，直接在body中写.类名或者#类名， 再按tab键

---

2. 浏览器操作

2.1 html开发者工具

F12

 

2.2 在开发者工具中快速取色

2.3 快速复原浏览器窗口以100%显示页面

Ctrl+0

 

2.4 JS中console.log()生成的日志

F12 -> console

 

2.5 JS的单步调试

F12 -> sources

---

3. FastStoneCapture

3.1 测量px

Settings最后一个图标 -> Screen Ruler

 

3.2 截图测量px

Caputure Fixed-size Region 再配合PS cc使用

---

4. Photoshop CC

4.1 取色

使用PSCC的取色工具

 

4.2 显示/隐藏标识

Ctrl+r

显示标尺后，在标尺上右键，将单位改成pixel

 

4.3 放大缩小

方法一：

Ctrl +：放大 Ctrl -：缩小

方法二：

Ctrl+空格+鼠标左键拖动

 

4.4 图片整体移动

空格键+鼠标左键

 

4.5 选框 与 撤销选框

Ctrl+d: 侧小选区

 

4.6 切片步骤

1. 选择切片工具

2. 选取想要切出的区域

切片区域可以微调

3. 选择保存为web格式

4. 选择保存文件格式为png-8

5. 保存选中的切片

 

6. 判断字体和字的大小

想持续了解更多，不妨点赞和关注呗。

创作不易，感谢支持！

Web前端技术交流q群：859794646，

群里可以一起学习编程，进群能领到学习资料以及源代码