美文网首页safari
如何在Windows中调试iOS中的Safari网页

如何在Windows中调试iOS中的Safari网页

作者: 总有大王想巡山 | 来源:发表于2017-07-02 11:06 被阅读6428次

    需求背景

    在做一个项目时,发现某些图片在安卓设备和电脑上能正常显示,但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑,所以需要在Windows中对苹果系统进行网页调试。

    系统环境

    电脑操作系统:Windows 10 专业版 64位 (10.0,版本 14393)

    iPad操作系统:iOS 10.3.2

    安装前准备

    1. 要保证iPhone/iPad能使用USB与电脑正常连接
    2. 在iOS中打开调试模式:设置->Safari->高级->Web 检查器

    安装

    1. 安装scoop

    # 使用Powershell进行安装
    iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
    # 如果安装失败,请执行以下命令再重新安装
    Set-ExecutionPolicy RemoteSigned -scope CurrentUser
    

    2. 安装ios-webkit-debug-proxy

    # 在Powershell中执行
    scoop bucket add extras
    scoop install ios-webkit-debug-proxy
    

    使用

    1. 启动ios-webkit-debug-proxy

    # 在Powershell中执行,-f表示指定前端工具,这里使用chrome-devtools进行调试
    ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
    

    执行成功后,Powershell窗口会显示

    Listing devices on :9221
    Connected :9222 to 你的设备名称
    

    2. 打开网页

    在chrome浏览器中输入localhost:9221,如果进入网页后出现Inspectable pages for 你设备的名称字样,表示连接成功,然后在iPhone/iPad中使用Safari打开网页,再刷新电脑上的chrome,就会出现一个超链接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1),然后右键复制链接地址并在新标签中打开,就可以像在电脑中一样对网页进行调试了。

    补充

    如果没有连接成功,或碰到其它什么问题,可以查看ios-webkit-debug-proxy的官方文档,里面有更详细的说明。

    问题解决

    最后通过调试发现是图片本身的原因,重新上传图片就能在iOS中正常显示了。

    相关文章

      网友评论

        本文标题:如何在Windows中调试iOS中的Safari网页

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