移动端H5调试工具

最新推荐文章于 2024-06-11 14:53:01 发布
最新推荐文章于 2024-06-11 14:53:01 发布
阅读量979 收藏 5
点赞数 1
分类专栏： javascript 移动端H5调试 文章标签： javascript vue.js nodejs 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/android_xiaobai1/article/details/120066010
版权

前端日记

由于工作调动，很久没写日记了，这次想起来继续写。一个前端小白的学习之路。

移动端H5调试工具分享

由于工作原因，我们经常在处于内网的环境下开发，开发PC还比较好，能用Chrome DevTool
（简称F12）进行调试，那么如果是移动端呢？

方法1. 使用同一网段，
在这里插入图片描述
只要手机连接同一网段的wifi，然后使用ip那个网址访问那是可以的。

方法2. 也是本次介绍的重点。

localtunnel

通过localtunnel就能把你的本地地址映射到一个公网地址，比如我本地地址localhost:8002,通过localtunnel生成一个指定前缀的https://cold-baboon-87.loca.lt地址，让测试人员无需通过局域网等就能访问。（简称内网穿透）

安装和使用

不得不说，这个工具是真的简单。

  // 使用npm或yarn全局安装localtunnel
最低0.47元/天 解锁文章
会跳舞的鸡
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
h5移动端调试工具vconsole/eruda
03-21
为了应对这个问题，业界诞生了专门针对移动端H5页面的调试工具，如vConsole和Eruda。这两个工具极大地简化了H5应用的调试过程，使得开发者可以更高效地定位和解决问题。 首先，vConsole是一款轻量级的Web Console...
移动端H5页面控制台打印信息：vconsole
06-01
vConsole的强大在于它为移动端H5开发提供了一种直观、便捷的调试手段，让开发者无需依赖复杂的开发者工具或电脑模拟器，就能在真实设备上进行高效调试。这极大地提升了开发效率，尤其是在面对各种不同型号和系统版本...
H5 手机端真机调试 F12 功能（方法二）
Passerby_K的博客
04-26 507
安装 npm install vconsole main.js 引入 import Vconsole from 'vconsole' const vConsole = new Vconsole() Vue.use(vConsole) 运行 直接在手机端真机调试
H5 移动端调试全攻略
油墨香^-^的博客
09-21 2387
随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。
【最佳实践】Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
最新发布
一起寻找DX3906-探索未知
06-11 741
Chrome调试利器~移动端H5调试工具_chrome://inspect/#devices
chrome浏览器调试手机端h5页面
铁柱的博客
12-27 2万+
这个是常识性的问题了。奈何我之前确实是不知道。只知道用F12来调试PC端的页面，这次经过同事指点，终于知道为啥人家在浏览器调试手机端页面，显示的大小都是手机端的。 步骤：1、打开F122、如果所示点击咱们平时寻找网页的DOM节点，都是用的第一个。 第二个就是专门用来调整手机端页面的。先点击这个按钮。3、选择适配的手机型号      按照2操作点击之后，我们可以看到这个界面。箭头的位置是一个下拉选
H5 手机端真机调试 F12 功能（方法一）
Passerby_K的博客
04-26 1307
在main.js 中 加入以下代码片段 if (process.env.VUE_APP_SERVER_ENV !== 'prod') { var script = document.createElement('script') // script.src = 'https://cdn.bootcss.com/eruda/1.5.2/eruda.min.js' script.src = '//cdn.jsdelivr.net/npm/eruda' script.async =
h5调试神器vconsole使用教程
weixin_47793882的博客
06-07 580
参考：https://www.jianshu.com/p/dd8a44d7c96e。
微信H5移动端真机调试--vConsole
热门推荐
唯一的切慕，唯一的诗歌……
04-09 4万+
在移动端实际开发中，还是会碰到一些棘手的bug，想看看到底哪里出了问题，苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口，使开发者可以真机调试。给微信开发者点赞。然后就可以看到你打印的内容及其他的信息，比如cookie、LocalStorage,Network、Element…… 微信打开这个网址 http://debugx5.qq.com/ 暖心的我给你准备好了二维码，扫一扫吧（不要...
Fiddler跟F12
hundanshanshan的博客
03-16 9303
一.移动端/小程序(H5) 目录 一.移动端/小程序(H5) 1.web端 2.移动端/小程序： 二.F12跟Fiddler异同点 一.前提(fiddler)： 1.相同点 2.不同点 二.F12跟Fiddler异同点 1.相同点： 2.不同点： 三.F12跟Fiddler优缺点 三.移动端(Fiddler) 1.配置同一个局域网 2.手机连接方法 四.F12常用功能 五.Fiddler常用功能 1.请求格式 2.安装证书，能抓到https的请求 3.打断点，修改参数
whistle.inspect:集成eruda和vConsole等调试H5页面工具的插件
05-22
whistle.inspect 使用该插件建议用最新版本的 该whistle插件集成了和等用来在移动端页面上模拟Chrome开发者工具功能的模块，方便调试手机上的H5页面，只需简单配置即可随意切换vConsole和eruda。 更多移动端调试方法参见：。 安装 首先需要安装最新版，如果你的机器已经安装了whistle，请确保whistle为最新版本： 安装及如何使用whistle参见 如何升级whistle参见。 安装inspect插件，执行npm全局安装即可： npm i -g whistle.inspect 如果是Linux或Mac，可能需要用 sudo npm i -g whistle.inspect，推荐使用或自己公司提供的npm镜像安装 使用 安装插件后，只需配置简单的规则即可随意切换vConsole和eruda： # 在匹配pattern的页面中插入eruda pattern
整套移动端h5页面源码
12-09
在IT行业中，移动端H5页面源码是构建移动互联网应用的一种常见方式，尤其在电商项目中广泛应用。H5，即HTML5，是超文本标记语言的第五次重大修订，为网页开发提供了更多功能和交互性。本套源码提供了一整套移动端的...
移动端调试工具--vconsole
02-20
移动端调试工具，用于h5页面的移动端，调试的时候将这个js引入，然后用console.log()向后台输出。
h5移动端游戏开发工具
12-28
在移动端H5棋牌游戏开发方面，LayaAirHTML5引擎的表现尤为突出。由于棋牌游戏通常需要实时的网络交互和高度的计算精度，LayaAirHTML5的高性能和优化的网络通信库能很好地满足这一需求。同时，其丰富的UI组件和事件...
移动端调试痛点？——送你五款前端开发利器
FireBird_one的博客
08-20 479
之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开发环境下没报错，可真机又出现了意料之外的情况，而且没法像 PC端 那样祭出 F12 大法，怎么定位问...
移动端 (H5) 调试工具 -- vconsole
weixin_30765475的博客
06-13 951
最近在改一个移动端项目，在手机上调试贼头疼，什么日志都看不到，分析不了bug问题。 然后我同事给我介绍了一个移动端的调试神器 --vconsole 有了这个神器，领导再也不用担心我的工作啦！！！ 0.0 怎么使用VConsole呢？ 超简单的，只需要2步 第一步： 在页面引入vconsole的cdn：https://cdn.bootcss.com/vConsol...
移动端H5调试神器—vConsole
学习 记录 总结 分享
10-27 787
移动端H5调试神器—vConsole特性：下载vconsole引入模块初始化vconole vConsole 由腾讯一个轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。 特性： 查看 console 日志 查看网络请求 手动执行 JS 命令行 自定义插件 下载vconsole github: https://github.com/Tencent/vConsole 引入模块 (1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中
H5移动端调试工具 vconsole、eruda 使用方法
Ryan的博客
05-11 1317
eruda: 在 index.html 中引入： <script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script> <script>eruda.init();</script> vconsole: 在 index.html 中引入： <script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"
H5项目移动端调试器
qq_31001061的博客
01-27 334
开发的移动端H5项目在手机浏览器调试工具 https://github.com/liriliri/eruda/blob/master/doc/README_CN.md Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。 cdn使用 &lt...
2023年移动端H5通常开发流程
07-16
2023年移动端H5通常的开发流程如下： 1. 需求分析和规划：首先，确定移动端H5的需求和目标，包括功能要求、用户体验、界面设计等，并制定开发计划。 2. 前端设计和UI/UX设计：进行移动端H5的界面设计，包括页面布局、交互设计、色彩搭配等，确保用户友好性和视觉吸引力。 3. 技术选型：根据需求和目标选择合适的技术栈和开发工具，比如HTML5、CSS3、JavaScript等，并考虑兼容性和性能优化。 4. 前端开发：根据设计稿，使用选定的技术进行前端开发，包括页面结构搭建、样式编写、交互实现等。 5. 后台接口开发：如果需要与后台进行数据交互，需要进行后台接口的开发，并确保与前端的数据传输和处理正常。 6. 调试和测试：对开发完成的移动端H5进行调试和测试，确保功能正常、兼容性良好，并修复潜在的问题。 7. 上线发布：完成开发和测试后，将移动端H5部署到服务器或发布到应用商店，供用户使用。 8. 运营和维护：继续监测和优化移动端H5的性能，及时修复bug，并根据用户反馈和数据分析进行功能迭代和优化。 这是一个常见的移动端H5开发流程，具体的步骤和细节可能根据实际情况有所不同。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会跳舞的鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值