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

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
9月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
181 0
|
11月前
|
Android开发 iOS开发
iOS 替换WebView网页图片为本地图片
iOS 替换WebView网页图片为本地图片
222 0
|
2天前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
6 0
|
9天前
|
Web App开发 移动开发 前端开发
CSS3 三大特性+Chrome 调试代码技巧
CSS3 三大特性+Chrome 调试代码技巧
|
17天前
|
Web App开发 JSON 前端开发
网络调试利器:Chrome Network工具的详细指南
Chrome开发者工具的Network面板是测试工程师的利器,用于监视HTTP请求、响应及资源加载。打开它可通过右键点击页面选择“检查”或使用快捷键。界面包含请求列表和详细信息,如Headers、Preview、Response、Timing。过滤器帮助定位特定请求,而瀑布流图展示加载顺序。模拟网络环境和保存HAR文件功能便于性能分析和问题排查。
24 0
|
2月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
119 1
|
2月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
2月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
9月前
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版