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

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
|
6月前
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
156 0
|
8月前
|
Android开发 iOS开发
iOS 替换WebView网页图片为本地图片
iOS 替换WebView网页图片为本地图片
201 0
|
3月前
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
6月前
|
Web App开发 Android开发 开发者
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
57 0
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
|
4月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
7月前
|
Web App开发 安全 JavaScript
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
51 0
|
7月前
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
160 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
|
8月前
|
Web App开发 JavaScript 前端开发
VUE系列——Chrome安装Vue调试插件
VUE系列——Chrome安装Vue调试插件