A. 怎么在移动端调试web前端
日常开发中，用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性，完成第一阶段的开发和调试。
第二阶段：
iOS 的话，iPhoen 数据线链接 Mac，打开 Safari 就可以直接使用 Mac 的 Safari 调试工具了。
Android 的话，Chrome 也有提供对应的调试工具。
国产浏览器中，UC 在 Android 提供了开发者版本，局域网下直接访问机器的IP + 9998端口即可进入调试环境。
但对于国内开发者而言，最大的问题在于国产浏览器的各种奇怪BUG。
面对这类没有调试工具的浏览器，weinre 也是一个可行的解决方案。
如果只是对JavaScript的异常进行跟踪，自己敲几行代码也可以勉强处理一下。
引入一个外部链接来接收异常信息，借此把异常显示到开发环境中，这样就可以根据异常的信息对 JavaScript 代码进行跟踪和定位。
其中大致的实现原理，是通过对 window.onerror 进行一个全局的异常监听，把捕获到的异常发送到指定的接口。
B. 怎么在移动端调试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 做代理，通过电脑去访问。
C. 怎么在移动端调试web前端
你可以谷歌浏览器里面有一个手机设备来调试web前端
1、打开谷歌浏览器，点击右上角的三个点，然后依此展开，选择开发者工具
2、会打开一个窗口，上面一半是展示区，下面是代码区
3、这样就可以调试前端代码了。
D. 如何在移动设备上调试html5开发的网页
1、打开手机web检查器。
通过【设置】>【Safari】>【高级】>【Web检查器】打开。见下图（点击查看大图），并且你会看到该选项下面对电脑操作的相应描述，照做就好。
E. 我想用手机测试自己写的web页面，该怎么做
一、IOS 移动端 （Safari开发者工具）
手机端：设置 → Safari → 高级 → Web 检查器 → 开。
mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。
便捷，简单，还可以调试外壳包裹的浏览器如微信。
备注：顺便提一下，要调试不同版本的ios，可以进xcode 进行下载不同的系统包（当然是在没有设备的情况下，土豪略过）
二、安卓移动端
1、chrome 调试方法
首先确保手机上和PC机上装有最新版本的chrome浏览器，其次是将手机的开发者选项打开并允许调试，然后将数据线将两台设备连接起来。在PC机上打开chorme，输入chrome://inspect ，然后在手机上打开chrome，然后手机会弹框询问是否允许调试，当然确定啦。有时候手机锁屏会断开，请拔掉usb重来。
点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试，就能像pc端一样愉快的玩耍了。如果有问题，请检查chrome版本。
作者：爱吃西红柿的鱼
链接：http://www.hu.com/question/37361845/answer/71674280
来源：知乎
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
chrome的调试一般只可以调试chrome页面，但是其官方文档说还可以调试WebViews：
“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”
需要说明调试WebView需要满足安卓系统版本为Android 4.4+，并且需要再你的APP内配置相应的代码，在WebView类中调用静态方法，如下：
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.(true);
}
以上配置方法适用于安卓应用内所有的WebView情形。
安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable，如果你想只在debuggable为true时候允许WebView远程调试，请使用以下代码段：
if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {
if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{
WebView.(true);
}
}
我这里只写了个大概，如果有其他问题或者欲查看详细文档，看下面链接（自备梯子）：
https://developer.chrome.com/devtools/docs/remote-debugging
注意：同样的你也可以在电脑上装安卓的虚拟机，推荐Genymotion ，一样的，想测什么版本，就自己下rom ，当然土豪当我没说。
2、UC开发者浏览器
由于不推荐移动端使用UC（大家应该自觉抵制移动端毒瘤），所以我只简单说一下，如果是在有兴趣，请自行查看： 开发者中心_UC优视︱UC浏览器︱全球第一大手机浏览器，用户超过5亿人︱手机浏览器
它的调试方法与chrome差异不大。
3、使用 Weinre 调试
该方法是比较老的一种方法，对于其他的调试方法来说属于刀耕火种型的。weinre是一个调试包，本身提供一个JavaScript，需要你在项目文件中加入该js。首先安装Weinre，我们用nodejs安装之，使用-g全局命令，以便可以在各个目录下访问：
npm install -g weinre
安装weinre之后再设置监听本机的ip:
然后打开返回的地址的说明文档，然后把返回的js写入到调试的文档中，注意我箭头所指向的地方。
这样访问页面的时候，加载这个 JS，就会被 Weinre 监听到进行控制。
小提示：这个 JS 后面的 #anonymous 起到一个标识作用，为了区别，我们可以将其修改成 #test 放到页面中。这时候，我们的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。
当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了：
Weinre 非常灵活，只需要在页面中加载这个 JS，然后访问即可，因此 WebView 可以用这种方法调试，一些低版本的 Android、iOS 也可以支持，Window Phone 也是可以用的。在调试移动设备时你可能需要在本地搭建一个局域网 IP 的服务器，将设备与本机网络连接成一个局域网，用移动设备访问这个网页即可。
当然 Weinre 也不是万能的，相比 Chrome 的调试工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它兼容性强，可以实现基础调试功能。
4、mihtool 测试
MIHTool 是国人开发的，基于 Weinre，用于 iOS 设备的前端开发测试。
与Weinre 的调试方式大体一样，即开启一个服务器，然后将 JS 插入到页面中，访问进行调试。
MIHTool 将这个过程简化了，它是一个 APP，可以直接安装到你的 iOS 设备里面，然后内置一个简单的浏览器可以打开你的测试页面，当它开启时，会自动向页面中插入 Weinre 的 JS，并告知 Weinre 控制台 URL 等信息，让你可以访问进行调试。
它还提供了一个公共的 Weinre 调试服务，生成类似 MIHTool Web Inspector 这样的链接，打开即可调试，非常方便，就是有些卡。
5、移动设备在线测试
移动端设备如此之多，小公司或者团队，没有这么多资金和精力购买如此多的测试设备进行测试。于是就有人买了这些设备，连接起来，提供在线调试服务。
一般就是他的真实手机设备打开，然后截屏出来供预览。
比如：BrowserStack 等，当然一般比较卡。
三、总结
调试方法很多，层出不穷，关键是要看自己是否顺手和熟练，关键在于按时按量的完成开发任务。
关键在于平时多积累跨坑姿势，少写一点不兼容的代码，调试就舒心一点。
如果这还不满足的话，可以查看更多资料：
移动端前端开发调试： http://yujiangshui.com/multidevice-frontend-debug/
移动开发真机调试： 移动开发真机调试
remote_inspect_web_on_real_device： jieyou/remote_inspect_web_on_real_device · GitHub
remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging
移动端Web开发调试之Chrome远程调试(Remote Debugging)：移动端Web开发调试之Chrome远程调试(Remote Debugging)
－－－－－－－－－－－－2015/12/2 补充 BrowserSync 部分－－－－－－－－－－－－－
很多朋友再说为什么不写Browser-sync，还有给差评的，说实话吧，我之前不了解那个东西。花了点时间看了一下，找到了他们的官网：Browsersync - Time-saving synchronised browser testing 觉得还挺有趣的哈。
然后就用了，觉得还行，真的会省很多工夫，入门也快，差不多就5分钟快速入门，前端的轮子都这样。。。
1、首先安装 BrowserSync
npm install -g browser-sync
2、启动 BrowserSync，原理应该是那种检测文件变化，然后在服务端 websocket 通知浏览器变动，再加载新的变动文件，在不支持websocket 的浏览器上就轮训服务端的变化，在加载新文件。我只是简单的抓包看了下，也不知道说对了没有。233
此时分两种情况，一种是静态：
// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
二种是动态：
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
然后就上手了啊，就这么简单。。
还有gulp 配合哦。具体就看文档了：Browsersync + Gulp.js
总结，前端变化日新月异，一个月不学，感觉就落后了啊
－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－
这里是 @于江水 大神的原文，之所以圈他一下，因为我的这个文档从他那儿粘贴了很多，这个是他的原文：--> 移动端前端开发调试 。
上面的更多资料部分，我也讲其放在第一个，不过之前的链接放错了，不是原博客链接，现在已更正。
这是我整理的，每一个我都真正的动手实现了的，关于安卓webview的调试部分我还补充了点我找到的资料 --> 移动端前端开发真机调试攻略
F. 如何用手机进行本地前端调试
第一步：连接电脑与手机
1. 手机打开“开发者选项”
安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次（或其他的版本号位置，一个个试肯定有……）
然后“开发者选项”就出现在“设置”里面了。
2. 手机打开“USB调试”
进入“开发者选项”—>打开“USB调试”（如果想手机长亮还要打开“不锁定屏幕”）
3. 连接并允许调试
用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”（可能会晚点出现，先去第二步）
第二步：用电脑启动手机浏览
1. 打开chrome的inspect
在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”
如无意外在Devices中会出现手机型号。
如果没有，再确认下：开发者选项、USB调试、允许该计算机调试
2. 手机打开chrome app
在手机中打开chrome，这时电脑的chrome inspect中会出现输网址的地方。
3. 测试手机浏览的控制
在电脑chrome inspect输入框中随便输个在线网址，点Open，手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭，但是用来调试的inspect点开是空白，应该是被墙了。
第三步：用手机测试本地页面
1. 开启本地服务器
对的，很遗憾手机chrome不能进行静态页面的调试。
所以必须开本地服务器，所幸现在有gulp+webserver，用法这里不讲了。
总之，完成这一点后，你应该在电脑上用 http://localhost 来浏览网页了。
2. 电脑chrome开启端口转发
在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去（比如8000和localhost:8000）—>勾选“Enable port forwarding”—>Done
3. 打开手机浏览localhost
如：输入http://localhost:8000 点Open
这样手机就能打开页面了。
G. 怎么在移动端调试web前端
移动端调试我知道的方法有2种
一种是谷歌浏览器自带的，安卓手机插上就行，然后就可以进行手机调试，前提是必须得开代理；
另外一种是打开安卓手机浏览器，输入你电脑本地ip地址，然后紧接ip地址后面输入你项目路径，也可以进行调试；
工作中我一般用第一种
如果苹果手机调试的话，那更简单，用xcode
H. 怎么在移动端调试web前端
日常开发中，用 Chrome 模拟 UA、屏幕尺寸 和 触摸特性，完成第一阶段的开发和调试。
<img src="https://pic4.mg.com/50/_hd.jpg" data-rawwidth="420" data-rawheight="169" class="content_image" width="420">
Android 的话，Chrome 也有提供对应的调试工具。
I. 如何实用便捷的在本地真机调试WEB端HTML5网页
1、如果你能FQ
chrome在32版本后就自带了移动端调度工具，可以在Android直接联调，但唯一遗憾的是，在我大天朝要FQ后才能行的通，我自己试了后公司好几个机器联不上…
2、如果你有苹果电脑和iphone
苹果电脑上的safari 6.0版本后就可以直接连接iphone手机调试手机版上safari正在浏览的web页面，前提是你得有个苹果电脑和iphone手机，但如果你是Android的话，就没办法了
符合前端B格的“小苹果”
自己在公司里也是开发Mobile端的HTML5页面的，也深受调试页面之苦，移动端的WEB页面坑又多，所以用node-webkit技术做了一个客户端，专门用来调试，现在每天工作之前都先打开“小苹果”
小苹果用的是node-webkit技术打包成客户端，其实内部实现都是web 页面与nodejs技术，所以特别符合前端B格。而且由于用了node-webkit技术，客户端可以跑在windows和mac电脑上，齐活儿了
小苹果官方网站
里边有下载及安装和使用的方法
J. 手机WEB页面开发跟PC端差别大吗
差别大，主要差别在一下方面。
一、开发终端不同
1、手机端：以手机、PDA、UMPC等便携终端为基础，进行相应的开发工作。
2、PC端：是开发基于B/S（IE浏览器）的网页开发是由若干个页面组成的有联系的集合。
二、开发方式不同
1、手机端：是为小型、无线计算设备编写软件的流程和程序的集合，像智能手机或者平板电脑。移动应用开发类似于Web应用开发，起源于更为传统的软件开发。
2、PC端：主要针对电子商务领域，不仅是网站美工和内容，可能涉及到网站的一些功能的开发，比制作有更深层次的意思。
三、特点不同
1、手机端：无线中间件（移动中间件）的原理就是把原生的功能封装打包成简单的API，开发人员只需要了解调用这些API的方法，即可完成移动开发。
2、PC端：针对不同的行业领域与市场规模，提供有针对性的解决方案，采用业内最优化的电子商务流程，以及各种受消费者欢迎的营销工具。