Chrome DevTools调试微信X5内核页面

起因：公司最近在做一个双十一的H5宣传页面，大概需求就是模拟微信视频来电，接通视频后弹出某某明星的视频巴拉巴拉@#%!!!~。看到需求我的第一反应是So easy，正当我码代码码的开心的时候，难题他来了！

问题：由于微信的X5内核对video标签做了限制，video播放后会处于最顶层，这使得视频上的挂断按钮就无法显示，所以就尝试着使用Chrome DevTools分析代码

准备工作：Chrome浏览器，安卓手机，数据线，梯子

一、在Chrome地址栏中输入chrome://inspect ，出现以下界面：

二、手机微信端打开http://debugx5.qq.com,会出现以下几种情况：

①：若出现无法打开debugx5！（debug5页面仅在使用了X5内核时有效,由于当前没有使用X5内核,无法打开 debug5!尝试进入 Debug tbs安装或打开Ⅹ5内核），

则点击进入 Debug tbs安装或打开Ⅹ5内核   ，进入后出现如下界面：

点击“安装线上内核”，安装完成后会弹出提示框，点击重启。

②、若出“X5调试页面”则进入第三步；

三、勾选以下选项（必须勾选，否则在Chrome中无法出现调试页面）

四、手机打开USB调试连接电脑，并勾选手机上弹出的USB调试提示；

五、用手机微信访问需要调试的页面，在Chrome中就可以看到当前手机访问的页面：

六、连接梯子，点击inspect即可看见当前手机访问的页面。（若未连接梯子则会出现HTTP/1.1 404 Not Found，因为chrome inspect需要加载 https://chrome-devtools-frontend.appspot.com 上的资源，所以需要翻墙。）

七、结束

虽然分析了微信X5的video，but还是没有解决问题，网上查了很多资料也没能完美的解决问题，所以记录一下调试过程，方便日后参考。