移动端开发调试大法

一、Chrome DevTools模拟手机调试

方法：F12打开开发者工具，点击Toggle device toolbar按钮模拟手机模式
优点：相对比较普遍的一种方法，结构、样式、断点调试等都不在话下。
缺点：只能通过pc浏览器调试，运行环境等达不到真机环境的条件，会造成某些属性、样式调试无问题，真机时不兼容问题。

二、Chrome浏览器自带的Inspect检查器

方法：地址栏输入chrome://inspect/#devices
优点：最新版本，ios和android都支持，与手机页面同步调试，可以同时调试多个设备和页面，并且满足绝大部分调试。
缺点：Android4.4以下不支持，必须通过数据线连接，android需要手机打开usb调试模式，对X5内核支持不是很好，时灵时不灵，ios需要额外配置可参考kelsen的博客。
问题：HTTP/1.1 404 Not Found
**解决：多半时网络限制问题，翻墙后可解决，百度云，提取码a64r
链接：https://pan.baidu.com/s/1g9f6YfW2k4AyvmsmaQFKYA
提取码：a64r
复制这段内容后打开百度网盘手机App，操作更方便哦

三、插件调试

VConsole

方法：一般可cdn引入或使用npm安装，详情可查看官网
优点：官方的话说，轻量、可拓展、针对手机网页的前端开发者调试面板。
缺点：调试功能有限，相对调试不方便，不能查看样式，不能断点调试，生产环境无法调试，开发环境会增加额外代码量

weinre

方法：比较老也比较有效的调试方式，可查看官网
优点：纯JS，不需要数据线连接，不受网络访问限制，多个调试器客户端可以同时调试同一个目标。
缺点：需要本地另起服务，只能运行在基于WebKit的浏览器，不可以断点调试。

Eruda

与VConsole相似，未曾尝试，可查看官网

四、使用HBuilderX编辑器Webview调试

方法：官网下载最新版HBuilderX(简称HX)编辑器。
运行编辑器 --> 运行 --> 运行到手机或模拟器 --> 显示Webview调试控制台
优点：真机运行，边改边看，对中文使用者友好，不受网络限制，不需要额外配置，见官网，通过WIFI连接手机调试Android、ios应用，见配置
缺点：意外情况可能比较多，需要数据线连接，android4.4以下版本和X5内核不支持，如果不喜欢用HX编辑器，而使用其他编辑器，对于电脑内存小于8G的同学，开发时会占用额外运行内存，不过其他方式也会占用内存，仅此。
多说一点HX：HBuilder本身内置HTML5+ APP开发环境，提供一套完整的移动应用开发解决方案，名副其实的前端编辑器。懒人利器。

五、腾讯出品的TBS Studio

方法：官网查看下载安装软件
优点：可以调试X5内核、微信小程序、手机网站等多个页面，自动检测连接，一键启动。
缺点：只能调试Webview基于TBS开发的App，非X5内核需要下载内核demo，ios不支持。
TBS Studio调试文档