㈠ 怎么在移动端调试web前端
响应式测试：Chrome DevTools 面板右侧拉伸快速查看效果；Firefox 响应式工具进一步调整；Chrome Emulation 精细测试。
Android 设备测试：使用 Android 虚拟机；优先使用 Weinre 测试，分析用户浏览器使用份额，有针对的进行测试。高版本 Android 测试机，使用 Chrome 连接调试。Android 4.4+ 的 WebView 修改 APP 源代码，也可以用 Chrome 调试。
低版本系统和其他品牌手机以及 WebView：统统可以用 Weinre 来解决。
iOS 设备测试：使用 Xcode 自带 iOS 模拟器，使用 Safari 调试；WebView 也可以被电脑上 Safari 调试；测试机连接电脑，也可以用 Safari 调试；MIHTool 可以在 iOS 设备上使用，提供类似 Weinre 的调试功能。
测试多种设备：BrowserStack 和 Keynote。
使用 BrowserSync 可以创建本地局域网 IP 服务器，并同步操作、监听刷新，极大减少测试操作，提高测试效率。
当移动端设备无法访问某项资源时，使用 Charles 做代理，通过电脑去访问。
㈡ 怎么在移动端调试web前端
通过移动端使用 Web 服务的比率越来越大，例如淘宝 2014 年双十一，移动端交易份额就达到42.6%。由此可见，掌握移动端的前端开发和测试是非常有必要的。
响应式测试
响应式现在基本是中小型项目的标配了，先来谈谈响应式测试技巧。
基础的响应式测试
响应式的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。当然，你的 CSS 中 Media Queries 判断条件设置时要使用max-width才行，如果使用max-device-width则会根据你设备的屏幕尺寸来判断。
优点就是对于 Chrome 开发者可以快速查看响应式变化效果。缺点就是分辨率尺寸不会很精确，因为它的页面宽度是添加了滚动条之后的宽度，这样对 Media Queries 的临界值效果不好测试。
对于 Firefox 浏览器，不愧是早期开发的必备神器，它早就内置了响应式测试工具，可以通过Firefox 工具-》Web 开发者-》自适应设计视图
可以设置分辨率等参数，以及模拟touch事件、屏幕截图等功能，可以随意拖动。足够简单和流畅，很方便测试响应式的变化效果等。对于基础的响应式测试以及临界值变化情况测试，强烈推荐 Firefox 浏览器。
由于响应式测试太简单，于是有了一大堆的书签栏 JS 工具或者 Chrome 扩展，并且以很多交互特效、复杂的功能来吸引用户。实际上使用起来，你可能需要依靠网络才能使用，还会遇到切换缩放不够流畅、刷新不方便等等问题，在这里不推荐。
㈢ 怎么在移动端调试web前端
日常开发中，用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性，完成第一阶段的开发和调试。
第二阶段：
iOS 的话，iPhoen 数据线链接 Mac，打开 Safari 就可以直接使用 Mac 的 Safari 调试工具了。
Android 的话，Chrome 也有提供对应的调试工具。
国产浏览器中，UC 在 Android 提供了开发者版本，局域网下直接访问机器的IP + 9998端口即可进入调试环境。
但对于国内开发者而言，最大的问题在于国产浏览器的各种奇怪BUG。
面对这类没有调试工具的浏览器，weinre 也是一个可行的解决方案。
如果只是对JavaScript的异常进行跟踪，自己敲几行代码也可以勉强处理一下。
引入一个外部链接来接收异常信息，借此把异常显示到开发环境中，这样就可以根据异常的信息对 JavaScript 代码进行跟踪和定位。
其中大致的实现原理，是通过对 window.onerror 进行一个全局的异常监听，把捕获到的异常发送到指定的接口。
㈣ 怎么在移动端调试web前端
可以用Hbuilder开发工具连接手机，ios系统需要在电脑上下载itunes，安卓的话需要下载个手机助手，Hbuilder里有在手机运行的选项的。
㈤ 怎么在移动端调试web前端
移动端的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。
推荐两个浏览器：
Firefox 浏览器，内置了响应式测试工具，可以通过 Firefox 工具 -》Web 开发者 -》自适应设计视图 启用 来进行调试。
Chrome浏览器，和火狐一样，直接按F12打开开发者模式，点击那个手机图标就可以，还有各种预设屏幕尺寸供选择。
㈥ 移动端手机web前端meta通用设置
手机版页面通常需要设置mate标签，来实现禁止缩放等效果。
<!--页面字符编码--><meta charset="utf-8">
<!--避免IE使用兼容模式--><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<!-- 启用360浏览器的极速模式(webkit)--><meta name="renderer"content="webkit">
<!--微软的老式浏览器--><meta name="MobileOptimized"content="320">
<!--关键字描述--><meta name="keywords"content=""><meta name="description"content="">
<!--设置移动端视图--><meta name="viewport"content="width=device-width, initial-scale=1, user-scalable=no"/>
<!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓--><meta name="HandheldFriendly"content="true">
<!--删除苹果默认的工具栏和菜单栏--><meta name="apple-mobile-web-app-capable"content="yes"/>
<!--设置苹果工具栏颜色--><meta name="apple-mobile-web-app-status-bar-style"content="black"/>
<!--忽略页面中的数字识别为电话，忽略email识别--><meta name="format-detection"content="telphone=no, email=no"/>
<!--uc强制竖屏--><meta name="screen-orientation"content="portrait">
<!--QQ强制竖屏--><meta name="x5-orientation"content="portrait">
<!--UC强制全屏--><meta name="full-screen"content="yes">
<!--QQ强制全屏--><meta name="x5-fullscreen"content="true">
<!--UC应用模式--><meta name="browsermode"content="application">
<!--QQ应用模式--><meta name="x5-page-mode"content="app">
<!--windows phone 点击无高光--><meta name="msapplication-tap-highlight"content="no">
㈦ 怎么在移动端调试web前端
真机调试，假如是iOS的，在设置选项里可以勾选开发者工具，方便调试。
还可以通过chrome、火狐的模拟，以及下一个安卓、苹果模拟器。
还可以搭建weinre，（具体教程请自行网络。
㈧ 怎么在移动端调试web前端
移动端的测试特别简单，通过改变视窗大小（也就是缩放你的浏览器）即可测试。
iphone+ safari 可以直接用satari开发工具调试。chrome+android也有类似的工具组合
㈨ 怎么在移动端调试web前端
可以直接用satari开发工具调试。chrom
+android也有类似的工具组合，但是没有实际
过。楼主如果觉得不太满意的话，可以去后盾人看看，那里也许会有不错的答案
㈩ 怎么在移动端调试web前端
日常开发中，用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性，完成第一阶段的开发和调试。
&lt;img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="420" data-rawheight="169" class="content_image" width="420"&gt;
Android 的话，Chrome 也有提供对应的调试工具。