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

相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
100 1
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
263 0
|
3月前
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
1月前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
26 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
2月前
|
Web App开发 iOS开发 开发者
Mac——基于Similator和Safari调试移动端页面
最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。
80 8
|
4月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
4月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
4月前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
267 0
|
6月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
126 0
|
5月前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。