ionic 手机测试打开vconsole

最新推荐文章于 2022-03-14 14:36:28 发布

ThisShe

最新推荐文章于 2022-03-14 14:36:28 发布

阅读量405

点赞数

分类专栏： ionic技巧

本文链接：https://blog.csdn.net/qq_33871182/article/details/108623721

版权

本文介绍如何在使用Ionic框架开发的手机应用中启用VConsole，以便于在真机测试时进行调试和问题排查。通过在index.html中引入相关配置，开发者可以方便地在手机上查看和操作控制台日志。

摘要由CSDN通过智能技术生成

在这里插入图片描述
index.html

 <!-- 手机测试vconsole-->
   <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  <script

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ThisShe

关注关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Ionic4—移动端调试工具Vconsole

雷雨天的雷胖子

12-23

695

目录一、概述二、详解一、概述 Vconsole由微信官方出品，是一个轻量、可拓展、针对手机网页的前端开发者调试工具。Vconsole主要用于移动调试，平时在PC端浏览器调试页面时，可以使用console.log打印信息，但在真机上无效，Vconsole就可以解决这个问题。 Vconsole可以查看console日志、网络请求、element结构、cookies和localStora...

移动端开启检查Vconsole

z1010017573的博客

07-30

1224

1，安装：npm install Vconsole 2，在main.js引入 import Vconsole from 'vconsole' const vConsole = new Vconsole() Vue.use(vConsole) 就可以使用了，不需要的时候注释就行

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

手机调试工具vConsole的使用教程

真正的大师永远怀着一颗学徒的心

10-06

1万+

首先在官网下载vconsole.min.js然后在main.js中进行引用饮用后的效果如下，右下角会出现绿色的按钮点击绿色按钮可以看到一些信息，我们可以在出现问题的时候点击绿色按钮查看问题原因，点开后有如下信息，我们也可以添加日志，可以点开后查看 ...

vConsole 让你在手机上也能轻松调试网页

点滴记忆

02-28

782

有时候为了想在手机真机上对网页进行 Debug，可手机上没有 F12，用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现，正好解决了这一痛点！（下列内容照搬一下官方文档……） vConsole 介绍 vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。在线体验官方网站功能查看 console 日志查看网络请求...

移动端调试vconsole

u012716788的专栏

03-14

1102

平时web开发时，在手机上，如果是要看控制台信息，都需要alert弹窗，这样很不友好.还会阻拦进程。通过vconsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果。具体使用方法也很简单 1、直接引入链接使用 <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> <script> //

ionic项目中使用vconsole调试工具

最新发布

05-23

可以在Ionic项目中使用vconsole调试工具，步骤如下： ...4. 运行Ionic项目，打开浏览器控制台，可以看到vconsole的调试工具。注意：在发布应用时，需要将vconsole相关代码删除或注释掉，以避免安全问题。

ionic-pay:ionic支付app测试demo ionic支付

05-12

ionic支付测试支持微信和支付宝支付，可以完全模拟app支付流程，填写订单信息获取接口地址和其它信息获取订单，点击支付完成app端支付。备注添加平台 # 添加ios平台 ionic cordova platform add ios # 编译 ionic...

ionic手机框架模板

11-12

在描述中提到的“ionic收集模板”意味着这个压缩包可能包含了一系列预设的、已经过测试的页面布局、组件样式和交互设计，这些都可以直接或稍加修改后用于新项目的开发。这大大节省了开发时间，提高了开发效率，尤其...

Ionic--全功能测试app

weixin_33868027的博客

08-21

472

2019独角兽企业重金招聘Python工程师标准>>> ...

ionic3&4log;日志封装及开发与上线模式切换

09-05

开发阶段，我们往往需要直接进入控制台查看自己写的console.log(object)日志输出信息，但是在上线后我们又不希望暴露自己的输出信息或者不暴露自己的page模块，我们还需要去把所有的console.log去掉，显得就特别不灵活，为了方便，一种是直接对console.log进行控制设置一个开关，另外也可以将所有的日志封装成一个provider，这样不会暴露出自己的日志信息是哪个模块。我这里整理的方案，已经实现日志的封装，在开发阶段同时也可以在模块直接打印输出，方便查看追踪问题，在上线后即直接屏蔽隐藏了具体模块而只有日志信息，这样就不会暴露出来。更好的方案还在优化中。

ionic app 真机调试

weixin_30547797的博客

06-25

291

ionic项目开发完成之后需要在手机端测试效果，但是如果出现问题又不知道问题在哪，需要借助chore浏览器打印查看的问题需要用新版的chore浏览器（至少要v.45以上） 1.将app安装到手机并打开手的开发者模式，将你的app在手机上允许手机调试模式； 2.在浏览器打开chrome://inspect/#devices网址，进去选择打开你的手机，第一次可能需要FQ，此后就不需要了， 3...

get到了一个移动端调试工具VConsole

inprivacy的博客

11-01

603

vconsole github地址：https://github.com/Tencent/vConsole ionic4中应用 1. npm install vconsole 2.angular.json "scripts": ["node_modules/vconsole/dist/vconsole.min.js"] 3. app.component.ts const...

vue--vConsole

ansaofen5650的博客

11-21

192

平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。那么，如果将console.log应用到移动端呢？需要借助第三方插件：vConsole 使用方...

Ionic Native - 1.cordova插件、获取设备号、获取地理位置、调试工具Vconsole

ZYYzyy1993的博客

10-19

610

一、Ionic 调用硬件的能力 Ionic 调用原生 api 的能力是基于 cordova 的，cordova 是 Adobe 公司的一个开源的框架，诞生于 2008 年，可以让我们用 javascript 调用手机原生的几乎所有的 api，比如：摄像头、麦克风等、重力感应、加速器、声音、震动、网络、视频、音频、地理定位等，原生能实现的所有功能。 cordova 目前最新版本是 cordova9.x 的版本。corodova3.x 以后的所有版本使用方法都是一样的。 Ionic 在 cordova.

ionic进阶开发中的命令使用

echo的专栏

09-29

3375

ionic 开发构建之路 1，创建一个自定义路径的项目如何基于现有的代码路径创建一个项目 ionic start projectPath repositryPath eg: ionic start ./demo "E:\github\qvm\dist" #注意带上引号，否则报错了，这里如果需要做的话只需要做到将dist的目录创建就可以了，而且文件使用相对路径 ionic ser

移动端中使用调试控制台 vConsole插件

xiasohuai的博客

12-18

1769

1.安装 npm install vconsole 然后复制 dist/vconsole.min.js 到自己的项目中。 2.引入模块 (1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 <head> 中引入： <head> <script src="path/to/vc...

轻松学习Ionic （一）搭建开发环境，并创建工程（2015-10-26更新）