iOS开发-使用Safari调试iOS APP H5页面

最新推荐文章于 2024-05-25 16:32:42 发布
最新推荐文章于 2024-05-25 16:32:42 发布
阅读量620 收藏
点赞数
文章标签： 移动开发 javascript xcode ViewUI
原文链接：https://juejin.im/post/5c0cd1c2e51d451d97173f79
版权

移动端开发过程中大量使用H5、js，而这些web页面的调试在Xcode控制台中不好调试。 Safari浏览器来开启开发模式连接iPhone来调试app脸面的web页面了。

1、启用Mac上Safari的开发模式

Safari浏览器-偏好设置-高级 选中 在菜单栏中显示“开发”菜单

进入开发模式

2、启用iOS设备上Safari的开发模式

设置-Safari浏览器-高级-打开JavaScript和Web检查器

3、调试iOS设备上Web页面

这时候讲iPhone链接到mac上，打开Safari浏览器，运行手机app里面的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

weixin_34029680
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Safari 调试iPhone web页面（App为开发版）
heqiang2015的博客
11-12 7074
1、Safari设置： 打开Safari偏好者设置，选中“高级菜单”，将页面最下方的“在菜单中显示开发菜单”复选框打钩，这样设置完毕后就能在Safari菜单中看到开发菜单 2、iPhone 设置： 打开iPhone手机设置——>选择Safari，找到高级选项，有JavaScript开关web检查器开关，将两个开关打开 3、iPhone连接mac上，打开Safari浏览器，运行App（开发...
vue做的h5项目在ios手机上打开是空白_在iOS开发中使用Safari调试WKWebView
weixin_39676979的博客
12-06 1833
在开发一个h5页面的时候，使用浏览器可以很方便的进行调试，检查元素，检查请求。当页面放到WKWebView里之后，我们也可以借助safari进行页面调试，下面介绍一下大概流程。操作步骤01配置手机打开手机设置里的“Safari浏览器”下滑到最下面找到“高级”打开“网页检查器” 02配置Mac打开电脑上的Safari浏览器选择菜单栏Safari浏...
ios在Safari上调试H5页面
weixin_41815063的博客
07-13 2737
第一步： Safari设置：打开Safari,找到偏好设置，点击高级-->勾选上”在菜单栏显示开发菜单“ 第二步：Iphone设置，在设置中找到Safari浏览器，打开高级---> 打开JavaScript 第三步： 调试：手机和电脑用数据线链接，用手机打开app里面的web页面，就可以看到运行页面内容，点击页面就可以看到控制台和页面代码，进行调试了 ...
iOS Safari移动端H5页面调试全攻略：利用ios-webkit-debug-proxy进行内嵌H5页面调试
最新发布
Cuckoosai的博客
05-25 1422
它充当了一个桥接器，将WebKit的远程调试协议转换为WebSocket协议，使得我们可以通过标准的Web调试工具（如Chrome DevTools）对iOS Safari和WebView进行调试。通过使用ios-webkit-debug-proxy工具，我们可以轻松地对iOS Safari移动端内嵌H5页面进行调试。在Devices页面，你应该能看到你的iOS设备，并且列出了设备上所有可以调试的Web页面。需要注意的是，由于iOS设备的限制，某些功能可能无法在调试时正常使用，如摄像头、麦克风等。
Safari调试iOS应用
Reyn_观极
06-26 1161
思路： 搜索一下 hubilder xcode 真机调试 Mac里需要装xcode 注意xcode版本 和huilder版本 出问题可能是xcode和hbuilder版本问题 Google下即可 HBuilder对前端代码的调试方式有边改边看、真机运行、webkit remote debug真机调试3种。 系列文章目录导航： 调试方式介绍一 边改边看 调试方式介...
App真机 - 联调chrome、Safari调试
热门推荐
White feathe 的博客
03-07 1万+
只需要两步骤：1、先保证 是否安装了chrome浏览器2、其次 ，保证 chrome 是否 已经翻墙成功！3、最后 使用android 真机连接 电脑4、最后的最后，打开chrome ,输入：chrome://inspect即可，另外，chrome只支持 android 4.4以上手机！
html脚本ios调试不了,Safari 前端开发调试 iOS 完美解决方案（iPhone/iTouch 等）
weixin_30420175的博客
06-10 1221
在日趋现代化的 Web 网络中，各种现代浏览器和移动终端设备的用户百分比越来越高。对于我们 Web 前端开发者来说，运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的。然而当我们需要对前端页面进行测试调试时，桌面版 Safari 的表现并不是与移动版 Safari 一模一样的(主要缘起 CSS 中 device-width 的判断)，因此我们只能直接在 iOS 设备上对 Sa...
safari调试iPhone app web页面
张梦磊
08-30 483
Safari设置 打开Safari偏好者设置，选中“高级菜单”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone设置 打开iPhone手机设置app 选择Safari，最下边找到高级选项，有JavaScript开关web检查器开关，讲两个开关都打开 到此，准备工作完成。这时候讲iPhone...
safari调试iOS app web页面的步骤
01-04
当下移动端开发过程中大量使用前段H5、js等等技术，而这些web页面的调试在Xcode控制台中不太明了，经常我们移动app运行了就是方法，但是不能显示响应的效果，这时候或许就是已经报错了，但是我们在Xcode控制台是看不...
javascript实现阻止iOS APP中的链接打开Safari浏览器
10-25
当用户在Web APP中点击一个链接，系统通常会默认使用Safari浏览器来打开外部链接，这可能破坏Web APP的整体用户体验。 描述中提到的解决方案是通过JavaScript代码来检测用户的设备环境，并在必要时阻止链接在Safari...
解决ios下h5锁屏时倒计时停止问题
10-15
5. **使用Hybrid框架插件**：如果使用Cordova、React Native等Hybrid开发框架，可以编写原生插件，利用iOS的Background Fetch或Background Task API，实现后台运行一段时间的JavaScript代码。这种方法较为复杂，但能...
内置h5 调用safari系统浏览器打开_H5唤醒App方式汇总
weixin_39648432的博客
12-01 5082
H5唤醒App方式汇总最近在做扫码之后的h5页面唤醒App的功能，做下记录唤醒方式列表URL Schemeschrome intentios UniversalLink / android appLink常见唤醒媒介iframea 标签window.locationURL Scheme组成[scheme:][//authority][path][?query] 比如：tuyasmart://hom...
iOS 用内置浏览器Safari 打开网页
俊而不逊的博客
04-01 9851
iOS 开发的时候，我们需要打开某个网页，可以写一个web页面，也可直接使用浏览器打开网址 那么我们怎么样使用iOS 内置的浏览器打开网址呢？ 如下： ios 10 之前使用[[UIApplication sharedApplication]openURL openURL:打开的网址 NSURL *URL = [NSURL URLWithString:@"http://ww...
复制链接到safari浏览器打开_APP应用内嵌h5页面怎么直接打开Safari来访问链接?
weixin_39737368的博客
12-18 7478
var openApp=function(){var localUrl=createScheme();var openIframe=createIframe();if(isIos()){//判断是否是ios,具体的判断函数自行百度window.location.href = localUrl;var loadDateTime = Date.now();setTimeout(function () ...
iOS App中微信H5支付打开safari，无法返回App终极解决方案
weixin_34323858的博客
10-18 5128
废话不多说，直接说重点 微信官方提醒：H5支付不建议在APP端使用，如需要在APP中使用微信支付，请接APP支付，文档详见微信支付开发文档 场景：公司业务需要，在移动端App中引入了微信H5支付逻辑，支付流程Android没问题，但是在iOS端出现了支付成功/失败之后打开了Safari，并没有直接返回App的问题。 以下为解决方案： 首先在网页中H5调起微信时，可以获取到H5发出的支付链接为h...
iOS H5(Safari)唤醒App 跳转对应的VC
夏天然后的技术专栏
10-26 1342
在Info-URL Types 配置 URL - Schemes — test 然后跟h5约定 他们回传使用 test:// 开头的一串字符串 在AppDelegate中 - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenU...
h5 先加载小图_微信小程序和H5的区别在哪里？主要有三点
weixin_39534100的博客
10-22 130
随着移动互联网的发展，许多应用在不断的产生，要说现在更新快、开放功能多的应用，只能是微信小程序了。微信小程序开放了60多个流量入口，更新了各种新的功能，尤其是之前实现的页面跳转功能，给开发者带来了好消息，但同时也有人说这是H5。那么，微信小程序和H5的区别在哪里？只有2M代码的微信小程序，在功能上也许不如APP丰富和完善，但微信也在不断地完善小程序的功能，优化其功能，让小程序发挥其最大价值，赋予小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值