文档章节

【原创】响应式设计之移动端调试工具

Mr.Zheng
 Mr.Zheng
发布于 2013/07/02 16:53
字数 1127
阅读 1031
收藏 37

背景

2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局。这是一个多么强大的概念,一套代码兼容所有设备,节省维护成本,提高开发效率。然而,现实并非如此完美,在其强大的背后也有鲜为人知的辛酸苦楚。

众所周知,在响应式设计出现或者说在各种移动设备不断迅速抢占PC市场之前,所有的网页设计几乎不要求兼容移动设备,而在PC端的开发调试已经相当成熟,各种调试工具纷纷脱颖而出,诸如:Firebug、Chrome开发者工具等。这让开发者如鱼得水,在传统网页设计中游刃有余。

而如今的互联网市场已经有很大一部分属于移动设备的领地,网页设计兼容移动设备刻不容缓,而响应式设计的提出让这一目标成为可能,甚至可以说是网页设计兼容移动设备的完美解决方案。但是,光有方案只能是空谈,几乎没有人能够不经过反复调试就能写出完全正确的代码,移动设备上的开发调试给网页设计带来了阻力,让开发者不得不投入更多的成本用以对移动设备兼容的调试。所以良好的移动开发调试工具必须问世,而拥有一款优秀的移动开发调试工具,必然给响应式网页设计锦上添花。

人类的智慧是无穷的,2010年底weinre问世,至今weinre已经发布2.0.0版本,已经成为一款相当成熟的针对移动网页设计的调试工具。

weinre

weinre is WEb INspector REmote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really. —— 完整介绍(weinre官网)

weinre使用方法

安装weinre:

  • Windows环境:

    npm install -g weinre
    
  • Mac OS X:

    sudo npm install -g weinre
    
  • 其他环境请自行查阅安装方法

在项目中引入调试脚本:

  • 引入方式:

    <script src="http://10.13.124.199:8088/target/target-script-min.js#test"></script>
    

    需注意,host与port要与启动weinre时设置的一直。

启动weinre:

  • 普通启动方式:

    weinre --httpPort 8088 --boundHost 10.13.124.199
    
  • 所有参数列表:

    --help (or -? or -h)                              查看使用帮助
    --httpPort [portNumber]                           设置启动端口,默认8080
    --boundHost [hostname | ip address | -all-]       绑定主机地址,默认localhost
    --verbose [true | false]                          是否允许详细信息写入stdout,默认false
    --debug [true | false]                            是否允许调试信息写入stdout,默认false
    --readTimeout [seconds]                           设置服务器将消息发送到目标或客户端的等待时间,默认5s
    --deathTimeout [seconds]     设置监听到一个调试客户端或目标终端连接到显示终端信息的等待时间,默认3 * readTimeout
    

开始调试:

  • 打开浏览器[推荐Chrome],输入<code html>http://10.13.124.199:8088</code> **注意:**该处不是输入项目地址,需与启动weinre时设置的host和port一直。会得到类似以下界面:

    weinre调试面板

  • 使用浏览器新窗口或其他终端[例如:ipad]打开项目地址注意:在项目首页中加入脚本并指定目标,例:

    项目地址预览

  • 再返回weinre调试界面,此时或片刻后会出现:

    调试目标出现在调试界面

  • 点选目标,此时被选中的目标变为【绿色】,切换至【Elements】选项卡,出现DOM结构:

    开始调试项目

其他工具

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
【原创】响应式网页设计基础【从零开始】

响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率,降低维护成本,提升用户体验等突出优势更是为Web 2.0时代掀起了又一...

Mr.Zheng
2013/07/05
0
6
响应式不是万能的!教你提升响应式设计的移动性能

你调整了浏览器,笑容攀上脸颊。你感到非常开心,认为自己实现了友好移动的目标。在正式讨论前,让我来预测下未来:你会失掉用户和经济效益,如果你把响应式网页作为唯一目标和唯一的解决办法...

罗马教堂的钟声
2015/11/24
56
0
HTML-CSS

一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺...

掘金官方
2018/01/04
0
0
2015-2016前端体系技术图谱

2015-2016前端架构体系技术 进入github查看大图 点击查看完整版 一、框架与组件  **bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset、按钮、图片、菜单、表单 ...

ouven
2016/01/26
18.2K
43
响应式Web设计(二):响应式Web设计的概念

  首先感谢大家对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,当然这一篇也不是什么干货,只是作为一个主题来说,概念的介绍必不可少,下一篇就应该有点干...

幸福2胖纸
2013/05/04
0
10

没有更多内容

加载失败,请刷新页面

加载更多

编码规范

4.、编码时的一些建议 1、尽量指定类、方法的final修饰符——虚拟机会想办法内联所有的final方法来减少方法执行时创建栈帧的数量,从而降低栈溢出的风险 2、尽量重用对象——重复new对象会增...

呵呵哒灬
21分钟前
2
0
第一个docker化的java应用

Docker 思想 集装箱 标准化:运输方式/存储方式/API 接口 隔离

BeanHo
22分钟前
1
0
数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
13
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
4
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部