美文网首页
windows使用chrome调试H5页面

windows使用chrome调试H5页面

作者: 索哥来了 | 来源:发表于2020-11-20 11:26 被阅读0次

    写在前面的话:安卓是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

    相关文章

      网友评论

          本文标题:windows使用chrome调试H5页面

          本文链接:https://www.haomeiwen.com/subject/kuhdiktx.html