windows使用chrome调试H5页面

写在前面的话：安卓是OK的，也很简单；本文主要记录iphone调试的方法，但是在最后一步的时候一直显示白屏（mmp），暂时没有搜到解决办法！有人知道的话请告知一下。。。

安卓

浏览器打开chrome://inspect/#devices

1.png

然后用数据线将安卓手机连在电脑上
然后找到手机上的 开发者模式 打开 允许USB调试
接下来用浏览器打开某个H5页面，电脑上就能看到了，点击inspect即可查看，如图：

2.png

iphone（再说一次，最后显示白屏，显示白屏，显示白屏，写出来纯属记录，期待后续解决方案）

首先打开powershell工具，安装scoop（win10有自带powershell，其他系统不知道，没有的话就自己下载安装一下）

set-executionpolicy unrestricted -s cu
y
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

执行完后，可以输入 scoop help 查看scoop是否安装完成，如图：

4.png

通过scoop安装ios_webkit_debug_proxy

scoop bucket add extras
scoop install ios-webkit-debug-proxy

通过数据线连接iphone和电脑（必须下载itunes），并且设置iphone：设置 -> safari浏览器 -> 高级，打开网页检查器
手机连接好之后，输入：

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

如果没有下载itunes，连接不成功，会显示下面这个：

5.png

连接好的话会这样：

6.png

然后在浏览器打开localhost:9221,可以看到已经连接成功了，并且可以看到端口是9222

7.png

然后在chrome://inspect/#devices页面设置9222端口

8.png

然后手机使用safari打开某个H5页面，即可调试（此时出现白屏bug，前功尽弃，啊哈哈）

9.png

也可直接在浏览器输入localhost:9222 审查元素，查看地址：

10.png

然后在浏览器输入该地址（如果不行，请去掉chrome-）（不过同样是白屏，啊哈哈）：
chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1
ps:
1.若中途某个安装下载出错，请保持电脑翻墙；
2.查阅白屏问题时，以下方案都有试过，皆不行（原地爆炸）:
---保持电脑翻墙；
---浏览器输入chrome://appcache-internals/# ,然后按照提示，清理C:\Users\76091\AppData\Local\Google\Chrome\User Data\Default\Application Cache下的缓存；
---手机safari清理缓存
---修改hosts文件，添加如下：

61.91.161.217    chrome-devtools-frontend.appspot.com
61.91.161.217    chrometophone.appspot.com
或
74.125.25.141 chrome-devtools-frontend.appspot.com

（如何修改hosts，请查看https://www.jianshu.com/p/bd1781cf3a38）