首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

作为视觉设计师前端知识赋能的一部分,今天给大家聊聊浏览器开发者工具(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页签的设备适配图形启用屏幕适配模式

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

更多功能,欢迎探索。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180112G0SES700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券