关于移动端H5页面的调试方法

VIP文章 已于 2023-03-07 19:48:09 修改
阅读量436 收藏
点赞数
文章标签： 前端
于 2023-03-07 19:24:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banxia561/article/details/102899835
版权

这个是常见功能了，只是为了给自己记录下～

safari (mac + iphone)系

  1. safari设置-打开Safari偏好者设置，选中“高级”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了
  2. iPhone 设置-打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，讲两个开关都打开
  3. iPhone接上mac上，打开Safari浏览器，运行手机app里面的web页面，在开发菜单中选择连接的手机，找到调试的网页，就能在Safari里面调试了

chrome (andriod)系

chrome调试手机网页_Jioho_的博客-CSDN博客

具体找到这样一篇博客，暂时由于网络限制还未实现，有待验证

通用方法vconsole

移动端（微信等）使用 vConsole调试console_vconsple_朱桂彪的博客-CSDN博客

banxia561
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端h5页面调试技术
02-27
移动端h5页面调试技术，如何在移动端调试，不错的入门教程
H5 移动调试全攻略
weixin_34290390的博客
11-16 356
原文链接 H5 移动调试全攻略 随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，定 Bug于无形。 一、概要 因为移动端操作系统分为 iOS 和 Android 两派，所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式，才能让你事半功倍。 文章会列举目前适合移动端调试的多种方案，快来选择你的最佳实践吧！ 二、iOS 设备 S...
ios手机在app中调试h5页面
haosicx的博客
03-12 1991
网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。
移动端H5 功能调试
weixin_45945521的博客
04-02 114
移动端H5 功能调试功能代码 功能代码 <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script> // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole(); </script> ...
H5移动端真机调试
chenghuihe的专栏
12-17 688
1、不想每次都打包，使用真机调试效率快 chrome://inspect/#devices 2、选择手机系统 开发人员先选、USB 调试
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、点
基于移动端真机调试的图文教程(分享)
01-04
最近要分析web页面，在安卓和ios上的性能差异，除了操作系统...4）mac打开safari浏览器（菜单->开发->对应的手机名称->要调试的页面），点击即进入Safari Developer Tools 5)可以见到的调试界面是这样的 缺点：不能
移动端调试工具--vconsole
02-20
移动端调试工具，用于h5页面的移动端，调试的时候将这个js引入，然后用console.log()向后台输出。
移动端网页开发调试神器Eruda的介绍与使用技巧
11-30
如果网页是运行在手机浏览器中还算好，可以把网址在电脑上打开查看console信息，但是如果是做APP的内嵌H5页面，那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug，但是，一旦H5上线后报错那就比较麻烦了，而且还...
whistle.inspect:集成eruda和vConsole等调试H5页面工具的插件
05-22
该whistle插件集成了和等用来在移动端页面上模拟Chrome开发者工具功能的模块，方便调试手机上的H5页面，只需简单配置即可随意切换vConsole和eruda。 更多移动端调试方法参见：。 安装 首先需要安装最新版，如果你的...
有关移动端H5调试
snow_love_xia的博客
11-14 246
这两天在做APP端神策埋点的功能，因为APP是内嵌的浏览器，所以我干脆在浏览器里面调试，发现我这边数据记录都有，但是一转移到APP里面触发埋点点击事件的时候，就查询不到记录，所以就想还是在手机上调试吧，于是就有了今天的这篇有关手机端H5页面的调试   1.本人是安卓手机 2.使用的是chrome调试   接下里就是调试前的准备： 1.手机要打开开发者模式，然后就是usb线连接电脑，并允...
h5页面在app中调试
aGreetSmile的博客
12-18 349
安装 npm install vconsole 在main.js文件中引入 importVconsolefrom'vconsole'; newVconsole(); 完毕
H5：在手机上调试开发H5网址
干饭搬砖两不误。
05-24 2251
在开发H5网址的时候，特别是手机真机上，想要查看日志即可采取当前方式。
ios在Safari上调试H5页面
weixin_41815063的博客
07-13 2595
第一步： Safari设置：打开Safari,找到偏好设置，点击高级-->勾选上”在菜单栏显示开发菜单“ 第二步：Iphone设置，在设置中找到Safari浏览器，打开高级---> 打开JavaScript 第三步： 调试：手机和电脑用数据线链接，用手机打开app里面的web页面，就可以看到运行页面内容，点击页面就可以看到控制台和页面代码，进行调试了 ...
js h5页面调起App（IOS 和android）的实现方法
qq_35500233的博客
11-28 1万+
h5页面调起App（IOS 和android） 第一次写这个：我们的app是由原声和h5组成的，当用户使用浏览器打开我们的页面时我们会引导用户使：打开App 下载App 刚开始我是使用定时器来实现的，当用户点击了打开App经过一定时间之后没有反应，则我们认为她调起App失败，跳转到下载页面，但是这个存在一个问题，起始已经调起App了但是用户没有允许打开App过了一定时间之后下载的页面还是会弹出来...
谷歌浏览器调试移动端h5页面
YICONGITSME的博客
05-11 5868
1.安卓手机打开开发者模式连接上电脑 2.在谷歌浏览器中访问地址： chrome://inspect/#devices 3.在安卓手机中的chrome浏览器中访问页面，记住一定要是chrome浏览器 （我只试了安卓，苹果不清楚） 4.刷新，显示连接上的设备以及打开的网页，点击inspect就可以查看手机网页上的dom元素，在电脑上调试h5页面。 如果打开是空白页面，需要翻墙 ...
使用safari对webview进行调试
jacob_ios的博客
06-09 1287
记录：http://www.cnblogs.com/muyushifang07/p/5412956.html
Safari实现对移动端H5页面调试
yanhaijunyan的博客
04-21 5277
通过Safari实现对移动端H5页面调试。 在移动端App开发模块里使用h5页面展示可以加快开发速度，但是h5模块出现问题需要调试并不方便。通过Safari辅助功能，可以发现定位问题。 总结操作步骤如下: 手机 ->设置->Safari ->高级->JavaScript打开、Web检查器打开 xcode工具通过usb连接手机，运行App 在App中点击进入到H5展示页面 ...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
jquery移动端h5页面开发
11-19
在jQuery移动端H5页面开发中，我们可以使用以下技巧和方法： 1. 使用viewport设置移动端页面的宽度和缩放比例，例如： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. 使用CSS3媒体查询来适配不同的屏幕尺寸，例如： ```css @media screen and (max-width: 768px) { /* 在屏幕宽度小于等于768px时应用的样式 */ } ``` 3. 使用jQuery Mobile框架来快速构建移动端页面，例如： ```html <!-- 引入jQuery Mobile库 --> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <!-- 使用jQuery Mobile组件 --> <div data-role="page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <p>Content</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> ``` 4. 使用touch事件来处理移动端的触摸事件，例如： ```javascript $(document).on("touchstart", function(event) { // 处理touchstart事件 }); $(document).on("touchmove", function(event) { // 处理touchmove事件 }); $(document).on("touchend", function(event) { // 处理touchend事件 }); ``` 5. 使用CSS3动画来实现移动端页面的动态效果，例如： ```css @keyframes myanimation { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .myelement { animation: myanimation 1s ease-in-out infinite; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值