前端移动端H5页面 DEBUG

最新推荐文章于 2024-08-22 11:25:39 发布

weixin_30436891

最新推荐文章于 2024-08-22 11:25:39 发布

阅读量233

点赞数

原文链接：http://www.cnblogs.com/lkeji388/p/9723510.html

版权

下载网址：https://github.com/Tencent/vConsole

把这个JS复制到项目里面

然后引入到HTML中

然后在JS上面实例化一下即可

页面就会有一个绿色的，然后点击一下就可以查看数据了

转载于:https://www.cnblogs.com/lkeji388/p/9723510.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30436891

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

12个前端必会 H5 问题及解决方法

qianduan666a的博客

08-14

906

前言作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。问题下面列举了我遇到的一些常规问题，如有遇到其他问题请在评论区补充，之后我也会实践后加以补充，感谢！（经常更新该文） 移动端 H5 相关问题汇总： 1px 问题响应式布局 iOS 滑动不流畅 iOS 上拉边界下拉出现白色空白页面件放大或缩小不确定性行为 click 点击穿透与延迟

使用MAC电脑、iPhone 真机调试 H5页面

qq_14854339的博客

04-09

2619

使用 Mac 电脑和 iOS 手机，真机调试 H5页面

参与评论您还未登录，请先登录后发表或查看评论

H5，防止 h5 无限 debugger

最新发布

豪冷的博客

08-22

214

点击后，变成蓝色，即为停用。但有时候，不生效！

h5 页面调试

m0_71902265的博客

12-08

808

h5页面开发

H5调试

qq_41776011的博客

06-04

250

H5调试工具：http://debugx5.qq.com 修改cookie，在console输入如下代码，修改cookie值 function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days2460601000); document.cookie = name + “=”+ escape (value) + “;expires=” + exp.toGMTString()

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

banxia561的博客

03-07

542

这个是常见功能了，只是为了给自己记录下～ safari (mac + iphone)系 safari设置-打开Safari偏好者设置，选中“高级”，在页面最下方看到“在菜单中显示开发菜单”的复选框，在复选框内打钩，这样设置完毕就能在Safari菜单中看到开发菜单了 iPhone 设置-打开iPhone手机设置app 选择Safari，找到高级选项，有JavaScript开关web检查器开关，...

js移动端调试控制台_使用Mobile Debug 在控制台使用debugger断点调试移动端h5页面的js代码...

weixin_39765588的博客

12-20

586

在控制台使用debugger断点调试移动端h5页面的js代码 - Mobile Debugwww.mobiledebug.com如何在真实设备上调试移动端h5页面对前端开发人员一直是个困扰，你可以说android+chrome/ios+Sarafi 官方有提供解决方案，我认为这两个解决方案很强大，但是弊端也很明显，他们受限于指定设备指定浏览器，无法提供通用的解决方案。经过3个月的版本开发升级，新...

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

2259

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

h5页面自定义字体_H5页面字体设置

weixin_36184940的博客

01-12

4579

H5页面不支持MicrosoftYaHei(微软雅黑)别傻傻的设置微软雅黑字体了如果一定要微软雅黑操作如下@font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载@font-face {font-family: ‘MicrosoftYaHei’;src: url(‘MicrosoftYaHei.eot’); /* IE9 Compat Modes */src: ...

构建项目//pc端、移动端H5

weixin_37877794的博客

07-28

685

vue-cli 安装 ui 库（eg：pc端用element ui、移动端用 vuex）

谷歌调试h5app

qw57863938的博客

11-01

833

1.手机开发者模中打开USB调试后用数据线连接电脑 2.打开谷歌浏览器，网址栏输入chrome://inspect/#devices 3.点击对应应用开始调试注：1.第一次使用谷歌浏览器调试需要翻墙。(翻墙方法之后可能发)2.如果是自己开发的app必须安装debug.apk，带签名打包谷歌浏览器无法检测到。 ...

h5调试工具

weixin_30526593的博客

12-12

375

1.Safari：iPhone 调试利器，查错改样式首选； 2.iOS 模拟器：不需要真机，适合调试 Webview 和 H5 有频繁交互的功能页面； 3.Charles： Mac OS 系统首选的抓包工具，适合查看、控制网络请求，分析数据情况； 4.Fiddler：适合 Windows 平台，与 Charles 类似，查看、控制网络请求，分析数据情况； 5.Spy-Debugger：移...

H5 移动端调试全攻略

油墨香^-^的博客

09-21

2418

随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧，修 Bug 于无形。

H5移动端调试方案全解（iOS&Android&Chrome&vConsole）

热门推荐

m0_48176238的博客

08-30

1万+

前言在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。谷歌浏览器手机模式调试优点：方便，常用确定：无法完全模拟真机，无法发现真机上的一些问题调...

chrome浏览器debugger H5问题解决方案

Qiled的博客

03-19

820

1. webview app 无法调试？ WebView.setWebContentsDebuggingEnabled(true); 市场现成工具：https://github.com/feix760/WebViewDebugHook 2. chrome://inspect 调试的排版错乱谷歌浏览器版本过高，用60版本可解决 ...

关于h5页面的几种调试办法

qxn_5266的博客

03-07

1万+

调试有两种情况：1、微信外打开的h5页面；2、微信中打开的网页微信外的网页 1、谷歌浏览器调试安卓（1）手机USB链接到电脑，打开开发者选项，安卓打开的方式有很多，，iPhone目前还不知道怎么用这个调试（2）电脑端打开谷歌浏览器输入chrome://inspect#device，记得勾选discover usb devicces 下面会有设备列表（3）选择设备，

h5应用如何适配移动端(干货总结)

qq_48896417的博客

04-13

3442

H5应用的开发是前端必备技能,h5适配移动端也是业务常见的场景,如何进行必要的适配,今天做一个比较全面的总结。

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  <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>  <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; } ```

前端 移动端H5页面 DEBUG

前端移动端H5页面 DEBUG