文档章节

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

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

没有更多内容

加载失败,请刷新页面

加载更多

移植Modbus到STM32F103(2):移植FreeModbus到usart3并运行示例代码

FreeModbus是Modbus的一个被广泛移植的实现。其源码在github,最新版是1.6。 FreeModbus支持Modbus功能码里的0x01~0x06,0x0F~0x11和0x17,对一些功能比如异常诊断和读事件计数等功能码并没有...

Konstantine
今天
3
0
浅谈神经网络(神经网络篇)

背景 之前写过浅谈神经网络基础篇,简单介绍下机器学习这块内容,用于扫盲。本文正式将神经网络,这部分是深度学习的基础。了解完可以掌握强大的机器学习的方法,也可以更好的了解深度学习。...

Uknowzheng
今天
3
0
移动硬盘变为RAW格式后的修复

在Mac上使用自己的移动硬盘结果文件系统格式变为RAW; 在自己windows笔记本上使用chkdsk H: /F进行修复,修复日志如下: C:\Users\mengzhang6>chkdsk H: /F文件系统的类型是 NTFS。卷标是 do...

晨猫
今天
3
0
10 Git —— 标签管理

10 Git —— 标签管理 本节内容: 命令git tag <tagname>用于新建一个标签,默认为HEAD,也可以指定一个commit id;命令git tag -a <tagname> -m "blablabla..."可以指定标签信息;命令git......

lwenhao
今天
3
0
小程序设置垂直居中,水平居中

如果子容器中的view需要居中的话,那需要在父容器中设置居中 水平居中: display: flex; flex-direction: column; align-items: center; 垂直居中 display: flex;align-items: cen...

淘幻幻
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部