H5移动端调试方案全解(iOS&Android&Chrome&vConsole)

这篇具有很好参考价值的文章主要介绍了H5移动端调试方案全解(iOS&Android&Chrome&vConsole)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在移动端盛行的今天,大家在日常中经常会接触到H5的移动端网页,不仅仅是在浏览器中,在各种的APP中也有存在着许多的H5页面,所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求,本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。

谷歌浏览器手机模式调试

  • 优点:方便,常用
  • 确定:无法完全模拟真机,无法发现真机上的一些问题

调试方法

ios调试h5,ios,android,chrome,前端 与我们正常的网页调试几乎一模一样,但是你需要打开调试窗口左上角的移动端模式,另外在页面的上方可以选择对应的机型,通过不同大小的机型来测试网页布局等是否合理。

另外在移动端的设计稿中长宽经常是375667也就是我们的iPhone6的大小,但是默认的机型选择中并没有这个机型,此时可以在编辑中添加,或者可以添加自定义机型。

ios调试h5,ios,android,chrome,前端

IOS调试

iOS调试主要依靠Mac + Safari这对组合来实现

Safari开发权限开启

PC

PC浏览器:设置 ⇒ 高级 ⇒ 在菜单中显示“开发”菜单

ios调试h5,ios,android,chrome,前端

iPhone

iPhone 设置:设置 – Safari浏览器 – 高级 – 打开网页检查器

ios调试h5,ios,android,chrome,前端

ios调试h5,ios,android,chrome,前端

模拟器调试:Xcode中的Simulator

注意点:最新下载的Xcode默认ios版本为16.4,该版本有个bug会导致在App上的应用无法被调试(找不到调试页面),该bug最早可追溯在四月份在外网被提出,至今(2023.8.14)未被修复,最方便的解决方案是降低IOS版本(可使用15.0版)。

在Xcode中增加iOS版本后再Simulator选择版本打开。

ios调试h5,ios,android,chrome,前端

在应用中打开对应的H5移动端页面,在Safari中的开发中选择模拟器的对应页面打开。

然后在Safari的开发中选择对应的页面

ios调试h5,ios,android,chrome,前端

这个时候就和我们正常的浏览器调试一样了,开始愉快的调试吧!

ios调试h5,ios,android,chrome,前端

真机调试

用数据线把手机和电脑连接,并且选择信任电脑,剩下的方式和在模拟器上没区别。

ios调试h5,ios,android,chrome,前端

ios调试h5,ios,android,chrome,前端

Android调试

大坑

首先我们知道需要事先安装SDK或者adb,但是我这次连接是无论是真机还是模拟器adb都会报

bash % adb shell adb: no devices/emulators found

排查了很久很久,各种方式都试过了,一直都是找不到设备,最后怀疑是adb的问题,就打算重装了,在重装前了灵机一动,我杀服务重开一下试试呢?

bash % adb kill-server % adb reconnect * daemon not running; starting now at tcp:5037 * daemon started successfully reconnecting emulator-5554 [offline]

皇天不负有心人啊!终于连上了!

原开启的服务为什么失效我们不得而知,以后遇到这种问题可以直接考虑重启。

模拟器调试

  1. 下载模拟器(MUMU For Android)

ios调试h5,ios,android,chrome,前端

  1. 安装Debug版本的应用(就是安装你在手机上的APP)

  2. 在应用中进入对应需要调试的页面

  3. 谷歌浏览器中输入

    chrome://inspect

  4. 在终端terminal中输入adb shell

    (事先需要安装adb可见链接)

ios调试h5,ios,android,chrome,前端

  1. 在浏览器页面中就可以见到被调试的页面了,点击inspect 后和在浏览器一样的调试方法

ios调试h5,ios,android,chrome,前端

  1. 对了,如果这个时候的你还是发现不能用的话。那你就是被墙了,你需要一个🪜来帮助你自己(或者可以使用edge浏览器,在地址栏输入edge://inspect)。

真机调试

与模拟器调试基本相同但是有以下注意点

  1. 需要打开开发者模式

    设置 → 系统 → 版本号 → 点击版本号5-10次即可打开

  2. 打开开发者模式后进入开发者选项

    打开USB调试按钮

  3. 需要有一根可以数据连接数据线(有些数据线仅支持充电)

  4. 连接后会弹出授权,确定即可

ios调试h5,ios,android,chrome,前端

vConsole调试

安装

bash npm install vconsole

使用

JavaScript // 全局使用 // main.js import Vconsole from 'vconsole' let vConsole = new Vconsole()

就可以看到我们的页面上出现了vConsole

ios调试h5,ios,android,chrome,前端 大功告成!

ios调试h5,ios,android,chrome,前端

符合工程化

调试工具我们肯定是希望他在PC端不出现,在生产环境不出现。所以我们可以根据对应的启动环境去做一些工作

```javascript // 判断是否是pc设备 const isPc = () => { const userAgentInfo = navigator.userAgent; const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; let flag = true; for (let v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; } } return flag; }

//如果不是生产环境并且不是pc设备那么就显示调试 if (process.env.NODEENV != "prod" && !isPc()) { console.log(process.env.NODEENV); const vConsole = new VConsole(); } ```

Chrome DevTools 调试工具基本原理

了解了一下这部分,发现内容很多很复杂,接下来有时间会单独出一篇文章来写这部分。。。。。。。

Flag文章来源地址https://www.toymoban.com/news/detail-743523.html

到了这里,关于H5移动端调试方案全解(iOS&Android&Chrome&vConsole)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

    目录 移动端 antv f2 版本问题 jsx 经典配置 自动配置 vue 使用 bar  radar PC端 antv antv G6 Vue2 scss Echarts Vue3 radar React 原生echarts+TS ListChart(列表切换echarts图表,同类数据为x轴的bar) ListChart.tsx ListChart.css ListChartUtil.tsx Recharts​​​​​​​ D3 体量:Echarts支持 按需引用 灵活度:EC

    2024年02月11日
    浏览(9)
  • h5移动端页面调试工具Chii与 weinre 一样的远程调试工具

    与 weinre 一样的远程调试工具,主要是将 web inspector 替换为最新的 chrome devtools frontend. 电脑上跑一个chii服务,把对应的js嵌入h5页面内,用手机访问h5页面,chrome内看chii服务地址即可找到对应管理控制台     可以通过 npm 安装。   用下面的命令开启服务。   在你的页面中使

    2024年02月08日
    浏览(17)
  • ios手机在app中调试h5页面

    网页开发在浏览器里调试很方便,但是在移动端开发调试,例如需要在app中打开,会用到一些bridge , 这时候就不能在浏览器调试。在app调试,如果每次都要发布到测试环境才能调试,那就会浪费很多时间。 可以通过charls来做一个代理 从而在手机app里调试h5页面 安装charles 安装

    2024年03月15日
    浏览(28)
  • 用 RemoteDebug iOS Webkit 在 Chrome DevTools 中调试iOS/iPadOS设备的前端页面

      相信很多小伙伴在开发移动端网页时,都会遇到兼容性问题的修改,尤其是当项目运行在真机上时,一些奇奇怪怪的bug接踵而至,很是头疼。在Android设备上,我们可以轻松的在Chrome DevTools上进行调试,但面对iOS设备,在我们没有Mac电脑的情况下,调试iOS的页面就是困难重

    2024年02月03日
    浏览(12)
  • 移动端H5使用window.open跳转,IOS不生效解决

    前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。 navigator navigator对象,用于提供当前浏览器及操作系统等信息,这些信息都放

    2024年02月11日
    浏览(11)
  • 神器vConsole!快速定位移动端问题,加快开发效率

    大家好,我是程序视点的小二哥! 今天小二哥碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到小二哥年少时羞涩的样子... 趁这个机会,就给大家分享一个针对手机网页的前端开发者调试面板工具: vConsole vConsole 是框架无关的,可以在 Vue 、 React 或其他任何框架中使用。

    2024年02月07日
    浏览(12)
  • 前端必须知道的手机调试工具vConsole

    在日常业务中我相信大家多多少少都有移动端的项目,移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦,今天给大家分享一个我认为比较好用的调试第三方库 VConsole ,有了这个库咱们就在手机上看控制台了, VConsole有两种引用方式,使用方法也很简单 方法一

    2024年02月12日
    浏览(7)
  • h5响应式布局、PC和移动端适配方案

    春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq)。总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的选择以及一些问题。本文部分文案由chat-gpt编写,例如介绍响应式布局的文案(才不是因为我懒~)。 响应式布局是指

    2024年02月05日
    浏览(13)
  • Android WebView 开发通过 chrome://inspect 调试页面设置

    1. 首先在app/src/main/AndroidManifest.xml 设置允许对app debug 2. 在初始化 WebView 时调用 webView.setJavaScriptEnabled(true) 方法 3. 手机端/模拟器安装移动端chrome浏览器,如果是配合pc端chrome调试,手机端chrome版本不能比pc端chrome版本高,否则可能无法成功调试。此外也可以使用手机端chrome+

    2024年02月05日
    浏览(10)
  • iOS 16.4 之后真机与模拟器无法使用Safari调试H5页面问题

    背景 iOS 16.4之后用真机调试H5时候发现,Safari中开发模块下面无法调试页面 解决方案 在WKWebView中设置以下代码解决 然后再次调试就可以了

    2024年01月20日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包