原因：当我们开发h5项目时，pc电脑谷歌模拟的移动端并不能完全取代真正手机，有可能和真机产生样式或者js语法使用的差异，从而产生兼容性问题。为了能够快速定位问题所在，我们知道手机调试样式、断点、联调接口，即使使用vconsole插件也是很有局限性的，一旦出现一些极其奇葩的问题，给我们造成心理阴影是巨大的，为了让我们身心愉悦，开发是更加得心应手。就很希望能够在手机上查看页面呈现，在pc端能够调试样式、断点等，那么真机模式就显着十分受用。
安卓
准备工作：安卓手机、数据线、翻墙工具
1. 手机打开开发者模式
设置 -> 关于手机 -> 版本号（数次点击）
2. 启动项目，使用ip的形式在手机浏览器上访问
如果遇到无法访问的现象，请关闭防火墙。
3. 连接数据线,点击充电设置 -> 选择MIDI模式。这个很重要
4. 设置开发人员选项
设置->开发人员选项->USB调试
5. 谷歌浏览器输入： chrome://inspect/#devices
注意1: 上面两个勾选选项，要勾选上，里面的配置可以不用改动。
注意2：有时可能remote target模块是空的，那么就刷新手机端访问的链接或者关闭手机浏器重新进入
其中下面的模块就是我们在手机端访问时监听到的访问链接，点击inspect就可以查看你想要调试的页面。
6. 结果呈现的样子，这样我们就可以愉快的调试了。
值得一提的是，这里需要借助翻墙才能够访问，否则会出现404页面。因为国内用户访问不到chrome-devtools-frontend.appspot.com
可能的问题
1. 如果发现chrome://inspect/#devices并没有监听到手机端访问的页面，建议多刷新手机端页面几次或者关闭浏览器重新打开，或者拔掉数据线重新连接。
苹果+windows篇
苹果真机调试要麻烦很多，需要借助各种工具。值得提前一提的是，这些工具插件可能一次性并不能下载下来，因为都是国外下载链接，解析ip可能会出错延迟，****一次不能成功也不要被报错所击垮，需要耐心多执行几次，保持一种念念不忘，终有回响的信念。实在不行了再参考解决方法。
准备工作：苹果手机、数据线、爱思手机助手或者itunes电脑软件(`先安装这个软件，因为需要重启电脑`)、翻墙工具
1. 安装scoop
伸展运动：其实scoop是属于一种包管理器，类似于npm作用一样。可以在C:\Users\xxxx\scoop找到，并且查看所安装的东西。也可以在终端运行scoop list查看安装了什么东西。
注意：电脑打开powershell(不能使用cmd), 因为scoop实质是ps1文件，只有powershell环境下才能运行。
输入命令：set-executionpolicy unrestricted -s cu, 输入Y
输入命令：iex (new-object net.webclient).downloadstring('https://get.scoop.sh'), 安装scoop
这样就表示安装成功了，也可以在控制台中输入scoop查看scoop命令，如果不识别scoop说明没有配置环境变量。
可能出现的问题
1.scoop安装时出现使用“1”个参数调用“DownloadString”时发生异常:“未能解析此远程名称:raw.githubusercontent.com。”
方法一：
命令替换成`iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/scoopinstaller/install/master/install.ps1')`，通过浏览器访问https://get.scoop.sh实际上重定向访问的是
https://raw.githubusercontent.com/scoopinstaller/install/master/install.ps1，那么我们直接在指令中直接访问原链接即可.
方法二：
如果方式一不行，那么我们使用这种方式，在hosts文件中代理ip地址，`199.232.68.133 raw.githubusercontent.com`, 然后再次执行方法一的命令。
方法三：手动下载
浏览器访问https://get.scoop.sh,会拿到脚本的源代码。将代码复制下来保存到电脑本地创建的install.ps1文件中(假设我放在了E:\tools\install.ps1)。
再打开powershell,定位到install.ps1所在的文件夹下(如在E:\tools)，在powershell中执行命令iex (new-object net.webclient).downloadstring('install.ps1'),再找到下载后的scoop文件夹将其shims文件夹路径添加到环境变量中。
2. 安装ios_webkit_debug_proxy
谷歌开发的代理插件，谷歌浏览器之所以能够调试苹果手机就是因为它。应该是做了一些代理操作，使得两平台能够互通。这里是它的源码，有兴趣或者有问题可以在这上面查找。https://github.com/google/ios-webkit-debug-proxy
安装ios_webkit_debug_proxy之前需要先安装bucket，否则会报错。
1).安装bucket: scoop bucket add extras
可能遇到的问题：
-
ERROR Git is required for buckets. Run 'scoop install git' and try again.
解决方式：如果包这个错误，那么恭喜你就使用`scoop install git`先安装git吧
2).安装ios-webkit-debug-proxy: scoop install ios-webkit-debug-proxy
可能遇到的问题：
- Couldn't find manifest for 'ios-webkit-debug-proxy'
解决： 会有Couldn't find manifest for 'ios-webkit-debug-proxy'错误，主要原因还是bucket安装不太顺利或者没有安装,卸载 bucket 后重新安装. scoop bucket rm extras 和 scoop bucket add extras
3. 打开手机的开发者模式
设置 => Safari 浏览器 => 高级 => web检查器 => 启用
4. 打开爱思或者Itunes, 手机连接电脑
5. 终端执行：ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
6. 浏览器访问http://localhost:9221,手机浏览网站即可看到监听结果
这里有两个小点值得说明一下：
1.直接点击链接是无法打开的，需要通过另一个窗口打开链接（可以通过右键的形式新开一个窗口）\
2.打开的链接也需要修改，如chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/4，将chrome去掉。
值得一提的是，如果想要更进一步查阅"[背后的故事](http://localhost:9222/json)"。细心的朋友应该能够发现ws://,我们可以想到其实核心技术应该是运用了websocket进行监听通信的。
所以如果页面出现调试延迟，或者链接没用监听到，多刷新几次或者稍微等待一下。
哈哈哈恭喜你到了最后一关，但是结果却是失望的，因为我用我的iphone14打开连接页面是空白的。。。我查阅了github提的issues也没有找到最终解，可能是这个插件的不足，对苹果系统版本兼容性不太好吧。如果你成功了，那么后面的一步就可以省略了，如果不行，那么让我们进入隐藏boss关。
7. 下载监听端口包
npm install -g vs-libimobile //兼容多平台的
npm install remotedebug-ios-webkit-adapter -g // 这个用处很大，后面会知道
终端运行：remotedebug_ios_webkit_adapter --port=9000
打开：chrome://inspect/#devices -> 选择configure -> 添加监听端口号
访问: 手机端访问链接，则在chrome://inspect/#devices中可以看到访问网站的列表。
8. 至此，我们就可以愉快的真机调试了，老板再也不用担心奇葩的bug了。
