视觉人员使用开发者工具小技巧

作为视觉设计师前端知识赋能的一部分，今天给大家聊聊浏览器开发者工具（DeveloperTools）。开发者工具顾名思义，是浏览器厂商提供给开发者对界面进行调试的辅助工具。

以IE为例，它有以下主要功能：

1.调试HTML和CSS

2.调试Javascript

3.Javascript性能调优

4.搜索内容

5.查看源

6.勾勒屏幕上的元素轮廓

7.使用图像

8.控制缓存和Cookie

9.验证源

10.在不同的浏览器模式和文档模式中进行测试

其它厂商提供的开发者工具功能与此差异不大。

本文基于Chrome开发者工具，讲述相关初阶使用的技巧，为视觉设计师抛砖引玉，希望给大家带来意外的收获。

有同学肯定会有疑问了，开发者工具貌似起来与视觉设计工作无关，那么通过开发者工具视觉设计师可以做什么呢？

功能虽多，但作为视觉设计人员的我们只需要掌握几个简单的技能，就可以协助我们以下工作啦，效率杠杠的。

1.视觉检视界面，查看界面的最终呈现内外边距值、字号、颜色、行号等是否符合规范。

2.获取正常途径获取不了的图片、视频素材等。

3.了解基本的前端知识。

4.屏幕适配

Chrome开发者工具在哪里？

我们有三种方式可以激活它。

1.直接在目标对象上点击右键，然后选择审查元素

2.在Chrome的工具菜单项中找到

3.快捷键

开发者工具功能区域

在激活开发者工具后，看到一大堆代码的你，是否感觉有点头晕？不要急，在开发员工具中视觉人员主要使用到的是Element面板，通过Element面板我们可以查看到当前网页文档的代码结构，相关的样式定义等。

实战案例

查看文本样式

使用Elements工具点击或在需要查看的对象上方右键Inspect查看源定位到目标对象。

在右侧配置区域，我们可以看到熟悉的文本样式信息。

文本相关属性

font-size／字体大小

font-family /字体

color /文本颜色

text-shadow /文本阴影

line-height /行高

letter-spacing /字间距

查看容器内外边距

橙色区域为外边距

内外边距相关属性

margin-left／左外边距

margin-right /右外边距

margin-top /上外边距

margin-bottom /下外边距

padding-left /左内边距

padding-right /右内边距

padding-top /上内边距

padding-bottom /下内边距

获取图片素材

以获取Google Logo图形文件为例

除了传统的右键另存为方式外，我们可以使用开发者工具选取对应的对象，精确识别对象承载方式，把图形选取保存至本地。

样式模拟

直接在现有界面上进行真实效果的模拟，用于辅助发现设计中的偏差。

在配置区修改相关的样式参数，在主操作区操作DOM结构。

屏幕适配

点击Elements页签的设备适配图形启用屏幕适配模式

在该界面可以选择不同的模拟设备，自定义不同的测试分辨率，用于模拟界面在目标设备上的设计展示效果。

更多功能，欢迎探索。