认识达内从这里开始

认真做教育专心促就业

Web移动端调试

发布：达内培训
来源：互联网
时间：2018-05-16 16:13

    移动端开发时，调试时最让程序员烦恼的问题，虽然现在很多PC浏览器的开发工具都自带移动端调试功能，但是显然和真机测试还是有一定差距，因为移动端不同的设备会出现不同的问题，在PC模拟器上显示正常的换到真机上测试就是会出问题。
    在这里整理一些常见的移动端调试方法。
    一、console 调试
    在pc端浏览器debug最常见的方法就是通过console在浏览器控制台打印出每步所需的回调数据（详细可以参考Web API接口：#/zh-CN/docs/Web/API/Console），或者利用浏览器开发工具设置断点。
    在移动端可以通过集成vConsole（https://github.com/Tencent/vConsole）来模拟pc端的开发者工具。
    二、官方自带模拟器
    这个现在也比较常见了。最常用的是chrome的模拟器，当然现在流行的浏览器基本上都有开发者的模式，也都携有移动端的模拟器。比如火狐浏览器、360浏览器等。
    基本上浏览器开启开发者模式的方法都统一了，在windows环境下按F12进入开发者攻击界面，mac环境则是下按option+command+i.
    移动端的浏览器有的会提供开发模式方便开发者们连接测试。
    例如UC浏览器的开发模式，详见：UC浏览器开发者版，#/document/webapp/doc5.html
    以及微信官方开发的微信开发者工具：
    https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html.
    三、第三方平台在线模拟器

第三方开发的平台比较方便，功能也相当强大，对于一些需要完善测试的，其实使用第三方的平台还是比较方便的。这里我就推荐几个比较有名的第三方平台： - BrowserStack - Keynote - BrowserShots - Browsera - Ghostlab等等…

    下面介绍一些我比较喜欢的一些远程测试工具。
    1、Weinre
    早期版本微信开发者工具中有个远程调试的功能，就是基于这个开发的，安装方法也很简单快捷。
    安装Weinre:
    npm install -g weinre
    装完成之后，输入指令启动：
    weinre --httpPort 8081 --boundHost -all-
    显示示如下则启动成功。
    2、代理应用
    这类代理应用实际上是用于抓包的，但是比起Weinre是基于开发者自身开发测试的。如果我们想要去获取其他网站的一些资源，例如http请求，或一些js源码等。这时候使用代理工具比较合适。 mac下常使用的是Charles,windows环境下可以用Fiddler
    默认开启的是8888端口。在手机上设置一个网络代理即可，这个不多详细介绍了。
    BrowserSync
    这是一个很强大的多终端测试工具，它可以跨设备同步操作行为，还可以监听你的文件，在文件修改时自动刷新所有设备中页面。BrowserSync官方网站也可以通过npm全局安装。
    四、真机测试

真机测试是一概而论的说法。由于像ios系统本身就提供了一些对前端十分友好的开发者工具。例如，Safari浏览器自带的开发者工具，或则xcode也有测试的方法，这里我局限性比较高，有这方面条件的是可以去搜罗一下相关的方法。再者，PhoneGap也是有调试工具的，只不过需要安装它测试app.这也是一种方法，不过相对来说使用一些模拟器更加简单方便。

以上就是潍坊培训学校给大家做的内容详解，更多关于java课程的学习，请继续关注潍坊培训学校。

< 上一篇：Java Web项目开发要学习的所有技术和开发工具总结

下一篇：CMS与WEB研发未来探路，及谷歌力推ChromeOS或打破PC操作系统格局 >