移动端真机调试 -—前端必备基础知识

初衷

           昨天下午,群内有朋友问怎么在移动端调试,然后因为自己属实是有些忙,就没敢搭话…对这位朋友表示抱歉,然后连夜发博客,别让类似的事情再次发生…
           那么做一个有 B 格的的前端开发,首先你要能解决所有遇到的头痛问题,然后才能潇洒的去把妹…
           很多朋友终于逃脱了 IE 的困扰,开开心心的,奔跑在了移动端开发的幸福之路上…然后,然后,然后,突然发现,路还是要一步一步走的,Mobile端的 WEB 页面坑还是蛮多的, 以前用过微信官方提供的”微信WEB开发”专门为移动端做的一个调试工具,其实也很方便,但是今天为大家介绍一个更方便的.那么今天Ban蜀黍介绍一个调试工具给朋友们!!!接下来就是幸福来临的时刻…

你是我的小苹果

           名字…饿….的确有点俗,可是我们不能因为另类”街舞”就否定这个开发工具啊!!!
           “小苹果”,用node-webkit技术做的一个客户端,专门用来调试,其实内部实现都是web 页面与nodejs技术,所以特别符合前端B格。而且由于用了node-webkit技术,客户端可以跑在windows和mac电脑上.

超级简单的安装及使用

1.安装后你会看到:
安装后的画面
安装后的画面
2.设置非常简单, IP 是自动获取的,端口号,可以自己随便更改,友情提示,端口号别冲突就好,文件路径点击 input 劳烦你自己进行设置就好,指认到 HTML 根目录就好,然后点击启动,至于扫码调试,亲测不好用!!!问题没研究,本人在 PC 端手动输入的地址,然后通过桌面微信发送到手机,点击打开的…地址如下: http://192.168.199.237:8181/index.html OK!
3:以上安装和配置完成后,进行最后两部,移动端调试启动后会生成一段script用于嵌入要调试的网页,直接扔到你的 CSS 引用下边就可以了.
4.手机设置,拿 ios 为例:
IOS 设置图
如图,将 HTTP 代理设置到手动,输入服务号 and 端口号,从新启动微信,访问页面, OK! 结束!

关于移动端web调试器 weinre 和 weinre UI

他们将apache的一个项目打包进了小苹果内,这样也省去了大家各种安装及配置的麻烦!
weinre UI 有图有真相:
安装后的画面
安装后的画面

weinre调试器面板的使用

1) 在remote标签下的Target内可以看到已连接到的调试网页,选中后变成绿色
2) 再打开Elements内就可以看到网页的DOM结构了鼠标经过DOM结构时,手机上对应的网页元素就会高亮什么的..
3) Network和Timeline标签貌似都不起作用..

小苹果的优势

  • 简单的安装与配置,不像apache或tomcat,一大堆设置,咱要的就是简单,小苹果本地服务其实就是用nodejs来写的
  • 将weinre移动端远程调试工具集成到了里边,打开就用,可以调试iphone,android上的web页面,webview中的页面一样可以远程真机调试

鸣谢:小苹果

小苹果官网