windows使用chrome://inspect 调试 ios系统webview -凯发app官网

测试交流3178字数 1506阅读5分1秒阅读模式

前言

熟悉 android debug 环境下 webview 调试的小伙伴对 chrome://inspect 应该并不陌生,那 ios 呢?作为没有 mac 资源的小小测试,我们有时候在测试 webview 在 ios 端的表现时非常局限。

解决思路

safari 是 苹果配套的浏览器,如果要调试的界面没有 https 的话,直接用 spy-debugger 或者 whistle 也是很方便的。然而如果要调试 https 界面,证书都能搞掉半条命
本文将通过 ios_webkit_debug_proxy 来解决 ios 的调试问题文章源自玩技e族-https://www.playezu.com/567441.html

环境准备

1.node.js webview 资源包运行环境
2.itunes 或者 爱思助手
3.chrome、edge、qq 浏览器等你喜欢用的浏览器文章源自玩技e族-https://www.playezu.com/567441.html

开始动手(建议都在 window powershell 下执行)

  • 安装 scoop(windows 的包管理工具)
#修改执行策略,选择是 or 全是
set-executionpolicy unrestricted -s cu
#安装scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
  • 通过 scoop 安装 ios_webkit_debug_proxy
#安装 extras
scoop bucket add extras
#安装 ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy

如果没有科学上网可能会报这个错误:couldn't find manifest for 'ios-webkit-debug-proxy'
不用慌,找个梯子,执行以下操作文章源自玩技e族-https://www.playezu.com/567441.html

# 卸载
scoop bucket rm extras
# 重装
scoop bucket add extras
# 再次安装 ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy
  • 安装调试依赖包 安装 remotedebug-ios-webkit-adapter 之前必须安装了 vs-libimobile 注意 2 个命令都有 -g 安装到全局命令中
npm install vs-libimobile -g
npm install remotedebug-ios-webkit-adapter -g
  • safari 启用调试
    设置 => safari 浏览器 => 高级 => web 检查器 => 启用文章源自玩技e族-https://www.playezu.com/567441.html

  • 设备连接电脑
    安装 itunes 或者 爱思助手,我用的是 itunes
    itures 需要登陆,然后在绑定设备,一台手机最多绑定 5 台 pc 设备,反正也是跟着操作就行文章源自玩技e族-https://www.playezu.com/567441.html

  • 启用调试文章源自玩技e族-https://www.playezu.com/567441.html

# 连接设备,生成连接端口
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
#开一个新的窗口
remotedebug_ios_webkit_adapter --port=9000(9000是上面命令生成的端口,具体看连接情况)

文章源自玩技e族-https://www.playezu.com/567441.html

打开浏览器的 chrome://inspect,建议用 edge,感觉比较稳定一点
设置代理
文章源自玩技e族-https://www.playezu.com/567441.html

手机端打开 safari,打开要调试的网页文章源自玩技e族-https://www.playezu.com/567441.html

  • 效果图

手机端文章源自玩技e族-https://www.playezu.com/567441.html

文章源自玩技e族-https://www.playezu.com/567441.html

pc 端(edge 效果)文章源自玩技e族-https://www.playezu.com/567441.html

文章源自玩技e族-https://www.playezu.com/567441.html

可以愉快调试啦。文章源自玩技e族-https://www.playezu.com/567441.html

javascript前端开发与实例教程(微课视频版)(web前端技术丛书)
本书作者具有丰富的项目开发经验,以 “从项目中来到项目中去” 为主旨,从web前端开发的基本概念入手,先后介绍javascript概述、语法基础、数组、函数、对象、dom、事件处理、bom、ajax技术、javascript特效综合实例、疫情实时监控系统、vue简介和vue基础特性等内容。本书适合javascript初学者快速入门。
29.5
 
文章源自玩技e族-https://www.playezu.com/567441.html文章源自玩技e族-https://www.playezu.com/567441.html
继续阅读

风险通知:非原创文章均为网络投稿真实性无法判断,侵权联系

免责声明:内容来自用户上传发布或新闻客户端自媒体,切勿!切勿!切勿!添加凯发k8国际官网首页入口的联系方式以免受骗。

评论  3  访客  3
  1. kk0t

    学习了

  2. cc

    sib 之前分享的文章,使用方式好像更简便,不用配置环境

  3. eason

    https://testerhome.com/topics/34559

    用 sib 的话,可以直接到最后一步。也不用配置 scoop,ios_webkit_debug_proxy 这些

发表评论

匿名网友