ios手机在app中调试h5页面

最新推荐文章于 2024-05-25 16:32:42 发布
最新推荐文章于 2024-05-25 16:32:42 发布
阅读量2.1k 收藏 7
点赞数 5
分类专栏： h5 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haosicx/article/details/129066390
版权

针对场景

网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。

页面调试

  • 可以通过charls来做一个代理 从而在手机app里调试h5页面
  1. 安装charles
  2. 安装好以后，设置代理在这里插入图片描述

在这里插入图片描述

  • 查看电脑IP地址，确保手机和电脑练的是同一个网络，然后在手机上的wifi设置手动代理，IP是电脑地址，端口号是charles设置的8888 , 在这个地方可以看到电脑的ip
    在这里插入图片描述
    填写好wifi代理后就可以下载证书了 点击这个后 手机Safari访问 chls.pro/ssl 下载证书
    在这里插入图片描述

如果没有弹出下载证书的链接 请检查

title: ios手机在app中调试h5页面
tags: [charls]
date: 2023-03-10 16:09:29
categories: [charls]

针对场景

网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。

页面调试

  • 可以通过charls来做一个代理 从而在手机app里调试h5页面
  1. 安装charles
  2. 安装好以后，设置代理在这里插入图片描述

在这里插入图片描述

  • 查看电脑IP地址，确保手机和电脑练的是同一个网络，然后在手机上的wifi设置手动代理，IP是电脑地址，端口号是charles设置的8888 , 在这个地方可以看到电脑的ip
    在这里插入图片描述
    填写好wifi代理后就可以下载证书了 点击这个后 手机Safari访问 chls.pro/ssl 下载证书
    在这里插入图片描述

下载完证书后 去设置=> 通用 => vpn与设备管理安装证书

安装完证书后去通用里的关于本机里信任证书 (不信任会导致无法联网)

现在就可以在手机中访问h5页面了

如果没有弹出下载证书链接 请检查这里面是否填写了本机的ip

在这里插入图片描述

在这里插入图片描述

下载完证书后 去设置=> 通用 => vpn与设备管理安装证书

安装完证书后去通用里的关于本机里信任证书 (不信任会导致无法联网)

现在就可以在手机中访问h5页面了

haosicx
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在iOS应用中更好的调试H5页面
风·之痕的博客
03-23 8429
在APP中，H5页面可以通过加载vConsole脚本，来查看页面的日志、异常、网络加载、设备信息、储存信息、元素。但是，JS脚本加载于页面Dom挂载之后，这样就会使得这一区间的信息丢失，而且vConsole的Error也会有采集不到的情况。本篇先简单讲述WKWebView的加载流程，再通过Safari网页检查器，实现H5页面的调试与问题定位。
【Chrome】Chrome-devtools：对ios-safari移动端的H5页面进行调试（ios-webkit-debug-proxy）...
weixin_33859231的博客
06-29 835
说在前头 要看干货的，可跳过该“说在前头”章节 该类文章，百度上“一挖一麻袋”，但说句不好听的，“一个能打的都没有”，总结如下： scoop：win7下，搞这个都烦的一批，到最后“scoop install ios-webkit-debug-proxy”，跟我说要翻墙？ 下了一堆有的没的npm插件，最后还是没法用。 到最后一步了，NMP跟我讲“能看，但没法debug调试”，我砸键盘了好吗？ ...
iOS Safari移动端H5页面调试全攻略：利用ios-webkit-debug-proxy进行内嵌H5页面调试
最新发布
Cuckoosai的博客
05-25 1147
它充当了一个桥接器，将WebKit的远程调试协议转换为WebSocket协议，使得我们可以通过标准的Web调试工具（如Chrome DevTools）对iOS Safari和WebView进行调试。通过使用ios-webkit-debug-proxy工具，我们可以轻松地对iOS Safari移动端内嵌H5页面进行调试。在Devices页面，你应该能看到你的iOS设备，并且列出了设备上所有可以调试的Web页面。需要注意的是，由于iOS设备的限制，某些功能可能无法在调试时正常使用，如摄像头、麦克风等。
h5真机调试之ios和Android和vconsole
weixin_47409897的博客
07-16 1287
【代码】h5真机调试之ios和Android。
App跳转h5
m0_65720832的博客
05-05 487
2）创建一个webview页面，当作中介，src属性为h5链接 ，plus.storage.setItem像h5传递参数。1）先去写一个点击事件，跳转到本项目的webview页面并传参一个想要跳转到的h5的链接。先判断一下是否是在app内打开，如果app内就接参如果不是要去进行权限判断跳登录页。
uniapp微信小程序中嵌入H5页面，调试信息查看
weixin_44375151的博客
03-29 348
uniapp微信小程序中嵌入H5页面，调试信息查看
iOS WebView/H5调试新姿势
weixin_39020105的博客
10-14 571
Sonic平台周边生态sib推出新功能webinspector啦！给iOS进行H5测试带来什么不一样的体验呢？往下继续查看吧sib使用文档。
H5在iphone移动端如何实现真机调试
qq_34010188的博客
03-28 8711
最近公司要实现苹果移动端和H5的交互，因为平时用H5的不多，对iOS的比较熟悉，用H5的界面出问题就定位不出问题出在原生端还是H5端。应运而出iphone真机调试H5界面。 设置iphone 1.设置-->safari--->高级-->打开 web检查器 设置mac上safari 2.Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单 3.连接手机和电...
safari调试iOS app web页面的步骤
01-04
当下移动端开发过程中大量使用前段H5、js等等技术，而这些web页面的调试在Xcode控制台中不太明了，经常我们移动app运行了就是方法，但是不能显示响应的效果，这时候或许就是已经报错了，但是我们在Xcode控制台是看不...
H5 手机抽签游戏源码
09-27
9. **部署与发布**: 完成开发后，H5游戏可以直接在任何支持HTML5的浏览器上运行，也可以打包成微信小程序、支付宝小程序等形式，或者嵌入到网站、APP中，实现更广泛的分发和使用。 总结起来，"H5手机抽签游戏源码...
安卓手机客户端App查询数据库源程序
10-27
【安卓手机客户端App查询数据库源程序】是一款专为开发者设计的示例项目，它展示了如何在Android智能手机上构建一个能够查询数据库的应用程序。这个源代码不仅适用于Android平台，还具有跨平台特性，允许开发者将其...
uni-app案例 仿微信页面（无响应）
06-16
在移动应用开发领域，uni-app是一个备受开发者欢迎的跨平台框架，它允许开发者使用一套代码库来构建iOS、Android、H5、小程序等多个平台的应用。本案例将探讨如何使用uni-app来模仿微信的页面设计，但描述中提到的...
【Chrome】Chrome-devtools：对ios-safari移动端的H5页面进行调试（ios-webkit-debug-proxy）
Mcky_Love的博客
06-29 1万+
说在前头 要看干货的，可跳过该“说在前头”章节 该类文章，百度上“一挖一麻袋”，但说句不好听的，“一个能打的都没有”，总结如下： scoop：win7下，搞这个都烦的一批，到最后“scoop install ios-webkit-debug-proxy”，跟我说要翻墙？ 下了一堆有的没的npm插件，最后还是没法用。 到最后一步了，NMP跟我讲“能看，但没法debug调试”，我砸键盘...
iOS通过Safari 调试H5笔记
圣人男的博客
07-28 4030
项目开发中，有的模块里通过H5页面进行展示，虽然带来很大的方便性，但是在问题调试过程往往无法通过debug进行精确定位，特别是在我的 “状态恢复过程中”，数据加载往往时而刷新后数据加载正常，时而不正常，带来很多困然。通过跟后台的联调，发现借助Safari 辅助功能，可以很好的发现问题！      操作实例移动端设备以iPad为样本进行测试！      操作步骤：      1.ipad ->
safari调试iPhone app web页面
热门推荐
guoyuyanmen的专栏
09-09 4万+
safari调试iPhone app web页面date: 2016-09-09 09:36:29Overview当下移动端开发过程中大量使用前段H5、js等等技术，而这些web页面的调试在Xcode控制台中不太明了，经常我们移动app运行了就是方法，但是不能显示响应的效果，这时候或许就是已经报错了，但是我们在Xcode控制台是看不到这些错误。这时候我们就可以用功能强大的Safari浏览器来开启开发
移动端调试（ios手机safari+chrome调试(windows)）
焉知泰否的博客
03-05 3万+
1、ios手机连接到pc设置手机safari   设置-》safari-》高级-》打开web检查器 （授权调试功能）2.、安装ios_webkit_debug_proxy根据文档，在windows下，首先需要安装scoop，而安装scoop需要电脑里有powershell。win10一般自带。2.1 安装scoop（一个安装工具）set-executionpolicy unrestricted -...
ios真机调试教程（不上架App Store安装到手机）
SHUIYI_24的博客
09-08 6878
详细步骤 1 1、申请一个APPid（应用标识符 2、添加调试设备 3、申请iOS调试证书 4、配置调试描述文件 5、iOS打包ipa 6、安装到手机调试 END 一.创建唯一标示符App IDs 1 登录苹果开发者中心，进入证书页面。 点击证书、ID及配件文件，进入设置。 2 选择App IDs –>点击+创建一个新的App ID 其中有两项需要你自己填： 第一项Name，
ios app的在线调试，查看日志
憧憬的专栏
07-17 2135
如果app从appstore或者其他托管平台下载的调试方法（不是通过xcode运行安装）1.手机安装了ipa，电脑打开xcode(通过数据线连接电脑)，window->devices 2.左边选中自己的手机，右边Installed app 选中要调试的app，下边向下的箭头选中⬇️，就可以在控制台查看app的Log了。
iOS调试工具—Instruments
m403180222的博客
11-22 3352
Instruments作为Xcode内置工具，是官方提供的一个非常强大的性能调试工具。我们可以用它来收集关于一个或者多个系统进程的性能和行为的数据，并跟随时间产生数据。通过Instruments我们可以完成定位内存问题、检测I/O活动、检测图像性能、检测CPU使用状况、自动化测试等工作。 启动Instruments Instrument的打开方式有很多种，下面为大家介绍便捷的四种启动方式。 1....
uni-app引入手机调试工具console
08-30
uni-app是一款跨平台的开发框架，它支持在一次编写的代码基础上运行在多个平台上，例如iOS、Android、H5等。在uni-app中，我们可以使用console工具来进行手机调试。 首先，我们需要在uni-app的项目中引入console工具。可以在main.js文件中通过import语句引入console工具，如下所示： ```javascript import console from 'uni-console' ``` 然后，在需要进行手机调试的地方，我们可以调用console工具的相关方法来输出信息或进行调试。console工具提供了多种方法，例如log、warn、error等，用于在控制台输出不同级别的信息。我们可以按照需要使用对应的方法，如下所示： ```javascript console.log('这是一条普通的日志信息') console.warn('这是一条警告信息') console.error('这是一条错误信息') ``` 在uni-app运行的过程中，我们可以通过手机的开发者工具或者浏览器的控制台来查看console工具输出的信息。通过console工具，我们可以快速定位问题并进行调试，提高开发效率。 总结起来，uni-app引入手机调试工具console，可以帮助开发者在手机上进行调试和定位问题。通过调用console工具的相关方法，可以输出不同级别的信息，并通过手机的开发者工具或者浏览器的控制台来查看输出的信息。这样可以更方便地进行手机端的开发和调试工作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值