H5：在手机上调试开发H5网址

已于 2023-11-03 20:45:21 修改
阅读量2.3k 收藏 4
点赞数 2
分类专栏： web前端之H5 文章标签： javascript html5
于 2020-05-24 10:52:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44136505/article/details/106311635
版权
本文介绍了在开发H5网址时如何便捷地在安卓手机上进行调试。通过在页面中添加特定代码，可以在安卓设备上实现类似Web浏览器的调试控制台，方便开发者输出日志和解决问题。对于使用Vue框架的项目，可将代码添加到index.html。文章鼓励读者分享和讨论相关技术经验。
摘要由CSDN通过智能技术生成

简介

在开发H5网址的时候，特别是手机上真机使用的时候，想要在电脑上输出日志，IOS的safari还可以直接联机调试，但是安卓就很麻烦，所以找了一下便捷的安卓手机调试H5网址的方法。

具体实现

其实，比较简单，只需要在页面中加入两行代码即可实现。VUE的话加在index.html即可。
在这里插入图片描述

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()
最低0.47元/天 解锁文章
前端-如此如此。
关注
专栏目录
手机端h5怎么调试
Pistachio839的博客
01-20 5591
最近遇到h5页面调试，想查看web打印的log或cookie，于是搜索资料找到以下方法 一、Mac+IOS+Safari- 进阶调试（亲测有效） 1､浏览器设置：Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。 2､iphone 设置：设置 - Safari - 高级 - 打开 Web 检查器。 3､通过手机的 Safari 来打开 H5 页面，我们通过浏览器开发选项可以看到： 4､通过这种方式成功解决问题。 *特点：不能调试webView里面的页面。 二、 Chrome+
h5项目手机端进行调试
h960822的博客
03-09 974
1：ctrl/window+r输入cmd回车，打开。1：在项目的配置环境中将host改为上面的Ip地址。2：搜索启动项目之后NetWork的地址便可以了。,查看本地ip， 选择IPv4地址。1：将手机与电脑连接同一无线。
h5 或 单页（静态页面）项目 如何在手机上实时调试看效果？（三步搞定）
最新发布
weixin_73318685的博客
08-18 441
1、先将项目在本地启动（如果是静态页面，直接鼠标右击选择open with live server），并在浏览器打开。2、在电脑上选择Win键+ R键，输入cmd，点击回车进入到操作系统。3、输入 ipconfig 后回车 查看你电脑的局域网地址 （IPv4地址），然后将项目地址127.0.0.1部分替换成局域网地址。最后，将项目完整地址在手机浏览器中打开即可进行实时调试。
用手机调试h5项目
像鱼的博客
01-11 1682
手机调试vue项目，手机调试h5项目
在手机上访问和调试本地的 H5 页面
花铛
07-05 1万+
在 cmd 里输入 ipconfig，就可以看到 ipv4 地址，也就是电脑本机的 ip 地址。
H5移动端调试方案全解（iOS&Android&Chrome&vConsole）
m0_48176238的博客
08-30 1万+
前言 在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。 谷歌浏览器手机模式调试 优点：方便，常用 确定：无法完全模拟真机，无法发现真机上的一些问题 调...
H5 移动端调试全攻略
油墨香^-^的博客
09-16 806
随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。
Android离线webview调试工具,开发H5混合应用必备
05-14
对于开发H5混合应用的团队来说，这样的工具无疑是提升开发体验和项目进度的关键。 总结来说，"Android离线webview调试工具"是专为解决国内开发者在使用`chrome://inspect`时遇到的网络问题而生的利器。它提供了离线...
h5小程序-大家来找茬（找不同）,手机h5小游戏.zip
11-13
" 描述了这个游戏是为手机用户设计的，特别适合在微信平台上玩，利用H5技术的优势，可以在任何支持浏览器的设备上运行，无需下载安装，即点即玩。同时，它被推荐为值得体验的游戏，意味着它可能具有吸引人的游戏设计...
H5 手机抽签游戏源码
09-27
8. **开发环境与工具**: 开发H5游戏时，开发者可能使用Visual Studio Code、Sublime Text等编辑器，以及Git进行版本控制，有时还会用到Chrome开发者工具进行调试和性能优化。 9. **部署与发布**: 完成开发后，H5...
移动端h5页面调试技术
02-27
移动端h5页面调试技术，如何在移动端调试，不错的入门教程
H5项目在Android上如何调试
qq_34263160的博客
11-30 776
H5项目在Android上如何调试
h5 页面调试
m0_71902265的博客
12-08 806
h5页面开发
H5移动端调试
热门推荐
晓风
01-18 1万+
使用chrome的devToolsApp需要翻墙而且不稳定，这里提供两种在PC上调试移动端H5项目的方式给大家 方式1 win10系统可以直接使用edge浏览器调试： 1、在手机设置里将“开发人员选项”打开，一般是连续7次点击系统版本号，不同品牌打开方式有小差异 2、将手机通过USB连接电脑后，将usb设置为可传输文件 3、在浏览器打开需要调试的界面 4、在edge浏览器搜索栏输入edge://inspect 第1、2、3步没有问题的话，在界面上会显示出移动设备名以及可以调试的界面​​​​​​​ 5、点
如何在移动设备上调试html5开发的网页
weixin_30387423的博客
11-23 231
在我们用phoengap+html5做的移动app中，经常遇到的问题就是 本地网页兼容但是到了app出现不兼容的情况，原因是手机端页面，大多运行在webkit内核的浏览器上，但还是会因平台、厂商的不同而有种种兼容性问题。 下面就介绍一下在iOS和Android两个平台上如何在真机上对页面进行调试。这里要说明的是，iOS平台只能用自带的Safari浏览器来调试，而Android平台也只能...
android手机联调,安卓手机联调Chrome调试H5页面
weixin_39630855的博客
05-30 511
欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~文章目录1 前言2 debugx5.qq.com3 手机连接电脑并打开开发者选项和USB调试4 Chrome设置5 参考文章1 前言由于最近调试H5，客户那边只有一个链接，得想办法重现bug并且还要能调试，就用了这个方法，而且因为有点忙，此文档只做记录，所以没有配很详细的图，有原始参考文章在下面我会...
移动端H5页面自适应使用方式（手淘H5）
weixin_40890907的博客
09-04 1725
要实现手机屏幕自适应布局（样式），可以使用手淘H5开发模式 1.在主页面index.html中引入js文件 &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &lt;script src="https://front-h5.oss-cn-hangzhou.aliyuncs.com/flex...
ios手机在app中调试h5页面
haosicx的博客
03-12 2363
网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值