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

相关文章
|
Web App开发 JavaScript 前端开发
chrome调试秘籍,让你的开发速度飞起来
chrome调试秘籍,让你的开发速度飞起来
220 1
|
Web App开发 开发者
利用chrome控制台调试post请求
利用chrome控制台调试post请求
615 0
|
9月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
1037 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
425 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
Web App开发 前端开发 JavaScript
超实用的Chrome DevTools调试技巧
超实用的Chrome DevTools调试技巧
309 0
|
Web App开发 iOS开发 开发者
Mac——基于Similator和Safari调试移动端页面
最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。
625 8
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
2032 1
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问

热门文章

最新文章