• 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还是没有解决问题,网上查了很多资料也没能完美的解决问题,所以记录一下调试过程,方便日后参考。

  • 相关阅读:
    MyEclipse 快捷键(转载)
    Microsoft .NET Framework 2.0安装失败
    数据库管理方面的电子书下载地址汇总
    增强MyEclipse的代码自动提示功能 (转载)
    有关Eclipse的自动完成&代码整理(摘)
    使用NewtonSoft.JSON.dll来序列化和发序列化对象(转载)
    hMailServer配置默认域名
    arcgis中的 style和serverstyle(转载)
    python function learning
    整理的设计模式博文列表
  • 原文地址:https://www.cnblogs.com/hhuiii/p/11721334.html
Copyright © 2020-2023  润新知