Question

怎么在移动端调试web前端

Answer 1

通过移动端使用 Web 服务的比率越来越大，例如淘宝 2014 年双十一，移动端交易份额就达到 42.6%。由此可见，掌握移动端的前端开发和测试是非常有必要的。

响应式测试

响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。

基础的响应式测试

响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用 max-width 才行，如果使用 max-device-width 则会根据你设备的屏幕尺寸来判断。

优点就是对于 Chrome 开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对 Media Queries 的临界值效果不好测试。

对于 Firefox 浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过 Firefox 工具 -》Web 开发者 -》自适应设计视图

可以设置分辨率等参数，以及模拟 touch 事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐 Firefox 浏览器。

由于响应式测试太简单，于是有了一大堆的书签栏 JS 工具或者 Chrome 扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。