Safari/Chrome调试WebView

2024-06-03 13:44:55

前言

最近在写《iOS代码调试》系列的博客，估计会有十篇以上的内容，等到都写完了会在Github以一个仓库的形式开源出来，欢迎关注我的Github：

LeoMobileDeveloper

WebView

大多数App会选择H5去实现某些弱交互但是却需要热更新界面，这时候WebView就派上用场了，那么如何对WebView进行调试呢？

Safari

开启开发菜单

Safari -> 偏好设置

勾选“在菜单栏显示开发菜单”

设备的Safari调试

设置 -> Safari -> 高级 - > 开启Web检查器

选择要调试的网页

在App内打开对应的Webview

状态栏点击开发 -> 选择设备 -> 选择网页

然后，就可以通过safari调试这个网页了

对于iOS原生开发来说，用的做多的还是终端，比如你要测试一个WKWebView的JSBridge

window.webkit.messageHandlers.bridgeName.postMessage({//data..})

或者测试一个scheme

window.location.herf="xxxxx"

建议iOS开发者学习一些JS的基本知识，这会对调试WebView大有帮助。

Chrome调试

Chrome调试比较适合写H5的同学，因为在这里可以使用类似React/Redux等插件来提高效率。

准备工作：

开启iOS设备中Safari设置的WebContent检查器
确保手机被系统信任

安装：ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安装：remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

运行adapter:

remotedebug_ios_webkit_adapter --port=9000

接着，在App中打开包含WebView的应用，然后chrome打开如下地址

chrome://inspect/#devices

点击config

添加localhost:9000

然后，就能够看到刚刚应用中的WebView了

点击inspect，就可以用Chrome进行调试了：

Safari/Chrome调试WebView相关推荐

Chrome调试WebView时Inspect出现空白的解决方法(使用离线包不Fan墙）
起因使用HTML5开发Android应用时,少不了调试WebView.做前端的还是习惯Chrome的开发者工具,以前都是输入Chrome://inspect就可以调试WebView了,太方便了. 最 ...
Android使用Chrome调试webview中的H5界面
前言:我们的项目是使用的webview加载H5的应用类型,最近框架升级后项目出现问题.通过chrome进行调试,发现每次都忘记使用步骤.今天记录一下! 下面是调试步骤: 1.电脑下载的Chrom浏览器 ...
无需插件用Chrome调试WebView加载的网页
转载请注明出处: http://blog.csdn.net/aa464971/article/details/78142637 前言有时候我们需要在WebView上打开网页,有的还需要两端交互,但是 ...
DCloud 使用chrome调试
使用chrome调试 PC端Chrome可以调试安卓WebView与手机端Chrome网页,PC端调试移动端为开发定位问题提供了强有力的工具. Dcloud框架实现基于安卓组件WebView,使用ch ...
window使用chrome调试ios设备的H5页面（Safari和APP）
window使用chrome调试ios设备的H5页面(Safari和APP) 1:用管理员身份打开PowerShell,不同操作系统打开方式不太一样,win10的话在搜索栏搜索就能找到( 2:查看Po ...
Android通过Chrome Inspect调试WebView
Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法转载自:https://www.cnblogs.com/slmk/p/7591126.html A ...
iOS Safari调试webview时页面空白或者闪退解决
最近在调试一个bug,是嵌入的webview页面,需要使用iOS Safari浏览器调试. 如何调试webview ios Safari 所需要的设置打开"设置->Safari浏览器 ...
window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器
先上效果图真机 PC Edge window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器 Safari 是苹果配套的浏览器,正常来说如果使用的是 macOS 直接一条 ...
ios safari 模拟器_iOS开发之Safari调试WebView页面
在iOS开发过程中,难免会加入html5页面来实现文章详情等等类似功能. 我们都知道火狐等PC浏览器有类似firebug,审查元素等工具来调试网页样式与脚本,查看请求参数与请求头等等. 在iOS开发中 ...

最新文章

热门文章