iOS 调试:通过 Safari/Chrome 调试 WebView

简介: iOS 调试:通过 Safari/Chrome 调试 WebView

iOS 调试:通过 Safari/Chrome 调试 WebView


主要汇总通过 Safari 和 Chrome 调试网页的步骤


Safari 调试 WebView


1、真机/模拟器开启 Safari 调试开关


如果需要远程调试iOS Safari,必须启用Web检查功能


  • 设置 -> Safari -> 高级 -> 启动”Web检查“

image.png

Safari 调试 WebView-01



2、Safari 开启调试模式


  • Safari浏览器 -> 偏好设置 -> 高级 -> 勾选“在菜单栏中显示开发菜单”
    image.png


3、开始调试 WebView


  • 将手机通过数据线连接到mac上
  • 打开 Safari 浏览器,运行手机 app 中的 Web 界面
  • Safari -> 开发 中选择连接的手机,并找到调试的网页
    image.png


Chrome 调试 WebView


1、准备工作


  • 安装部署ios-webkit-debug-proxy,在终端中输入

brew install ios-webkit-debug-proxy
  • 启动 proxy,在终端输入以下命令

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html


运行结果如下所示


image.png


2、调试


  • 在 Chrome 中打开 localhost:9221 ,可以看到当前已连接的设备列表
    image.png

在app中打开Web页面,并在Chrome中点击local进入新页面,并右键转到该连接的页面

image.png

最后在Web页面中,右键,选择检查即可

image.png

Chrome 调试 WebView-04

相关文章
|
Android开发 iOS开发
iOS 替换WebView网页图片为本地图片
iOS 替换WebView网页图片为本地图片
261 0
|
3月前
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
13天前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
16 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
2月前
|
Web App开发 iOS开发 开发者
Mac——基于Similator和Safari调试移动端页面
最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。
64 8
|
6月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
1042 1
|
6月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
6月前
|
小程序 Android开发
Appium微信小程序自动化之开启webview调试功能方法封装
Appium微信小程序自动化之开启webview调试功能方法封装
196 0
|
Web App开发 安全 JavaScript
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
|
iOS开发 开发者
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
621 0