【H5】 h5运行在手机浏览器查看控制台信息

最新推荐文章于 2024-06-21 10:56:06 发布
最新推荐文章于 2024-06-21 10:56:06 发布
阅读量6.5k 收藏 18
点赞数 18
分类专栏： vue 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43494333/article/details/123816554
版权

问题描述

在开发H5项目时 pc端可以通过F12查看控制台信息，如果在手机上运行就看不到，此时需要在入口文件index.html中加上两行代码就可以了 如下：
在这里插入图片描述

核心代码

 <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
 <script>eruda.init();</script>

此时在手机浏览器中运行项目 则可以看到 右下方有个按钮 点开就能看到控制台信息，如图：

在这里插入图片描述

长安有故里
关注
专栏目录
H5app手机端控制台打印vConsole
08-09
H5app手机端控制台打印vConsole H5app手机端控制台打印vConsole 用于开发H5app打印。显示在手机端控制台
手机调试打开控制台方法vconsole
qq_36521848的博客
01-06 4196
功能简介： 手机调试网页，看不到控制台，无法获取接口相关信息，引入vconsole可以实现 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script src="https://cdn.jsdelivr.net/npm/
需求之 实现获取调试信息在h5页面，在手机端可以查看调试
最新发布
qq_39835505的博客
06-21 195
https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md git地址。Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。一个轻量、可拓展、针对手机网页的前端开发者调试面板。方法二：使用 CDN 直接插入到 HTML。方法一：使用 npm（推荐）
移动端控制台
10-11
移动端控制台
手机浏览器查看控制台
清雨小竹
11-16 6887
html <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script> <script> //初始化一下就可以了， let vConsole = new VConsole(); //你打印的数据 比如 console.log('test'); //就可像小程序一样的看了和调试了。 </script> vue //如果是在vue中要先安装包 npm i.
手机端网页调试想看浏览器控制台的方法
weixin_63448554的博客
01-06 2166
点击下面的vConsole按钮就可以弹出控制台了，可以进行一些简单的调试，如果需要更复杂的调试，好像是可以通过手机系统安装什么证书，然后可以在电脑上调试，看同事使用过，博主没用过，上面这个调试如果不理想大家可以去网上找其他方法试试看。
H5页面（在移动端）显示控制台
失眠时间的博客
05-12 1088
vconsole插件在vue项目中显示控制台信息
vue的H5页面移动端调试显示出控制台
往事随风
03-18 2588
最近做二元项目的时候，需要和三方进行联调，需要在移动端显示控制台，但是手机网页没有控制台，在H5页面嵌入到app后，联调会非常麻烦，所以给大家推荐一个手机控制台的轮子：vConsole 1、安装vconsole插件 npm install vconsole 2、引入并使用 //在main.js内 import Vconsole from "vconsole"; //开发环境使用，生产环境自动取消 if (process.env.NODE_ENV == "development") { new Vc
uni打包H5在手机浏览器看控制台
qq_38026437的博客
02-12 3364
uni写的h5项目在电脑上调试没有问题，但是在手机上有bug时，很难调试，所以需要在移动端有一个控制台查看具体问题。 首先，打开hellouni的项目，找到自带的入口html 也可以在官网上找初始化的html。 将html放到自己项目里。 然后打开manifest.json选择h5配置 找到刚刚导入的html文件。 最后在这个文件下面加上2行代码 script s...
移动端H5页面控制台打印信息：vconsole
06-01
在移动端H5页面开发中，由于手机浏览器的限制，开发者往往无法直接在设备上查看到JavaScript的控制台输出信息，这给调试带来了诸多不便。为了解决这个问题，开发者社区提出了一个名为vConsole的解决方案。vConsole是...
H5-frame-test:测试浏览器运行h5帧率
07-09
5. **跨浏览器兼容性**: 确保测试框架能在主流浏览器（如Chrome, Firefox, Safari, Edge等）上运行，并收集它们的性能数据。 通过这样的测试，开发者可以识别出哪些部分的代码拖慢了帧率，从而优化性能，提升用户...
uni-app - 修改默认端口，H5 项目控制台运行出来的 IP 地址的默认端口号（H5 项目运行后控制台，修改项目运行到内置浏览器默认 8080 端口号）
王佳斌
11-28 7519
uni-app 运行到H5 修改默认端口号，uni-app如何修改默认端口，uni-app修改默认端口，uni-app本地运行修改调试已上线微信H5项目，请问在UNIAPP的H5运行调试时候的IP是否可以自己设置固定，uni-app 开发环境,如何设置 h5 服务器的端口，uni-app 如何修改默认端，uni-app 修改默认端口，uni-app指定端口号，uni-app - 修改 H5 项目控制台运行出来的 IP 地址的默认端口号（H5 项目运行后控制台，修改项目运行到内置浏览器默认 8080 端口号）
移动端浏览器设置控制台、调试
weixin_45952434的博客
07-06 3168
移动端浏览器打开控制台调试
APP 混合开发中如何查看 H5 的控制台
qq_44900902的博客
02-20 945
本文主要介绍在使用原生客户端 + JS-bridge 的混合开发的时候，如何在移动端打开查看 h5 部分的控制台。在开发阶段 H5 部分大部分是在电脑端完成，在嵌入 APP 端之后，若想查看接口调用是否正常，代码运行是否异常，则需要开发控制台。那么，我们需要用到vConsole手机前端开发调试利器。vConsole 是一个轻量、可拓展、针对手机网页的前端开发者调试面板。特性：查看 console 日志查看网络请求查看页面 element 结构。
手机浏览器模拟调出控制台
热门推荐
qq_22146195的博客
11-25 1万+
在页面中添加代码 <script src="//cdn.jsdelivr.net/npm/eruda"></script> <script> eruda.init(); console.log('控制台打印信息'); </script> 效果如图： 下载：https://github.com/liriliri/eruda ...
在手机端的能看到console打印的方法
qyx189573的博客
11-09 7181
能在手机端h5的能看到console打印数据的两种处理方法 ##方法一 //自己封装一个js ##方法二 像微信小程序一样的手机调式
手机上查看控制台
meng_xiaoxiao的博客
09-25 503
手机查看控制台
移动端h5网页、微信网页调试之利用vConsole真机调试+显示控制台打印信息、调试接口(附带vue项目里的具体使用方法)
南北极之间
06-17 1万+
​ PC页面，我们可通过F12打开控制台，查看日志信息，便于测试调试。但放到移动端中，移动端是没有控制台的，我们就无法查看页面的console信息，非常不便。但vconsole插件解决了此问题~ 介绍： vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。 现在 vConsole 是微信小程序的官方调试工具。 功能特性 日志(Logs)：console.log|info|error|... 网络(.
开发内嵌web，测试移动端，需要手机可以查看手机浏览器控制台打印的数据
就是不减肥
12-23 1025
web测试移动端，手机可以查看控制台打印的数据 export const loadScript = (url, callback) => { const script = document.createElement('script') script.onload = () => callback() script.src = url document.body.app...
uniapp的app项目中使用webview内嵌的h5页面如何像浏览器一样查看控制台内容
05-25
在uniapp中使用webview内嵌的H5页面，并想要查看控制台内容，可以通过以下两种方式实现： 1. 在H5页面中添加调试代码 在H5页面中添加以下代码： ``` window.addEventListener("message", function(e) { console.log(e.data); }); ``` 然后在需要输出日志的地方使用以下代码： ``` window.parent.postMessage("your log content", "*"); ``` 这样可以将日志输出到父页面的控制台中。 2. 使用Chrome浏览器的远程调试功能 可以在Chrome浏览器中打开H5页面，并启用远程调试功能。步骤如下： 1. 在Chrome浏览器中输入chrome://inspect/#devices 2. 点击“Open dedicated DevTools for Node”按钮 3. 然后点击“Add connection”按钮 4. 输入你的uniapp项目的H5页面地址 5. 点击“Connect”按钮 这样就可以在Chrome浏览器中查看uniapp项目中webview内嵌的H5页面的控制台内容了。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值