你应该懂的开发者小技巧!

不论你是不是设计师,前端知识都应该懂一些,今天给大家聊聊浏览器开发者工具(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.快捷键

IE:F12

开发者工具功能区域

在激活开发者工具后,看到一大堆代码的你,是否感觉有点头晕?不要急,在开发员工具中视觉人员主要使用到的是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页签的设备适配图形启用屏幕适配模式

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

更多功能,欢迎探索。

— END —

作者: 爱油茶

点个赞再走么

“THINK” “爱油茶”

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180123A0OEHR00?refer=cp_1026

同媒体快讯

相关快讯

扫码关注云+社区