移动端 vconsole 的使用

在微信和app里我们没有办法使用谷歌提供的开发者工具,可以借助 vconsole 使用步骤如下 1.安装 npm install vconsole 2.app.js里引入 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化 …

移动端开发利器vConsole.js,app内嵌H5开发时调试用

vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsole.js最新下载地址. 直接将vConsole.js引入项目中,需要注意的是:最好吧js引入到页面的最上边.这样刚页面会首先加载vConsole.js. <script src="path/to/vconsole.min.js"></script> <scri…

🍓 移动端调试工具之vconsole的使用～ 🍓

这里以在vue项目中的使用为例⬇️ 嗯模块化的. 不消多说,先cnpm install vconsole -S 然后在mian.js中配置之- ok啦-- 开发混合app的筒子,使用mac的话也有别的方法进行移动端在线调试-但还是这个更方便哈哈哈,ios.window都阔以!!…

移动端调试神器-vConsole

什么是vConsole? 官方说明是一个web前端开发者面板,可用于展示console日志,方便日常开发,调试. 简单来说相当于移动版的Chrome调试控制台,就是我们在PC端常用的F12 vConsole的使用场景? 比如测试妹纸拿着手机过来跟你说某个页面打不开.你心想,怎么可能,我在电脑上用Chrome调试得好好的,也没有报错啊. 然后你接过测试妹纸的手机发现确实有个页面打不开.问题来了,移动端又不能像PC端打开控制台调试,我要怎么排错呢? vConsole就运应而生了 vConsole…

移动端调试利器之vconsole

说明由于移动端项目在手机中调试时不能使用chrome的控制台,而vconsole是对pc端console的改写使用方法使用 npm 安装: npm install vconsole 使用webpack,然后js代码中: import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole = new VConsole() // 初始化或者找到这个模块下面的 dist/vconsole.min…

移动端打印输出内容以及网络请求-vconsole.js

今天,无意间从别人那里得知一个很好的js插件--vconsole.min.js,可以实现在移动端打印输出内容以及查看网络请求.下面记录使用方式. 1.下载vconsole.min.js插件以下复制了插件vconsole.min.js的内容 /*! * vconsole v2.5.1 (https://github.com/WechatFE/vConsole) * Copyright 2016, WechatFE Team * MIT license */ !function(e,t){"obj…

周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重点是随机撒花,下面会附上随机撒花的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"…

移动端调试利器-vConsole

现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole. 一.先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo.html</title> <script src=&q…

借助FreeHttp为任意移动端web网页添加vConsole调试

以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法 vConsole介绍 vConsole是一个轻量.可拓展.针对手机网页的前端开发者调试面板. 使用vConsole的项目可以让手机上的Web浏览器,拥有类似PC调试工具的能力. 正常情况下使用vConsole需要修改项目代码并重新发布. vConsole官方介绍(https://github.com/Tencent/vConsole) FreeHtt…

移动端 (H5) 调试工具 -- vconsole

最近在改一个移动端项目,在手机上调试贼头疼,什么日志都看不到,分析不了bug问题. 然后我同事给我介绍了一个移动端的调试神器 -- vconsole 有了这个神器,领导再也不用担心我的工作啦!!! 0.0 怎么使用VConsole呢? 超简单的,只需要2步第一步: 在页面引入vconsole的cdn: https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js 或者是下载下来还可以安装依赖 npm install vconsole,请根据自…

移动端调试神器vconsole,手机端网页的调试工具Eruda

移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试移动端调试工具vconsole安装Git地址:https://github.com/WechatFE/vConsolevConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题.目前vConsole自带有2个面板,默认为“日志”面板,负责展示log. 项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插…

移动端真机debug调试神器 vConsole学习（一）之基础

参考使用方法移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试面板下载地址 Github BootCDN…

移动端使用 vConsole调试

前言用vue 写移动端代码,有个报名页面就在iOS 9下出现问题,vue的循环渲染都正常,一开始的数据也能取到.证明不是vue的兼容性问题但是在用户点击按钮发现不能点击进入跳转工具推荐使用 vConsole 这个可以在移动端调试的解决过程 npm install vconsole 使用webpack,然后js代码中 import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole let vConsole…

移动端调试神器vConsole

vConsole.js 其实就是重写console方法,实现了类似于微信小程序的移动端调试效果在普通html文件里使用 <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); &l…

移动端调试vConsole

当我们在进行移动端开发的时候,经常会出现在pc显示正常,在移动端却各种异常的情况.这时候我们在手机上又看不到error log. 所以我们就需要vConsole这样一个移动端开发神器. 那具体要怎么使用vConsole呢, 有以下三种方法: 第一种方法:下载下来引入 CDN地址:资源链接 <script src="path/to/vconsole.min.js"></script> 第二种方法:npm命令,先执行命令 npm i vconsole:然后在文件中加…

移动端调试工具---vConsole

vConsole:https://github.com/Tencent/vConsole/blob/dev/README_CN.md 使用方法: 使用npm进行安装: npm install --save vConsole 在main.js写下面代码: /* eslint-disable no-unused-vars */ import vConsole from 'vconsole' 这样就可以使用vConsole了…

vconsole移动端调试技巧（禁止webviuew,inspect等）

如果由于某种原因(天朝FQ),不能支持google 的 inspect 调试或者再想在某个APP里面调试你的页面,但是没有打开APP的webview ,也不能授权调试在或者,Fider 可以拦截,看到json的数据请求,也可做一定层面的调试 ,但是你觉得太复杂,这个时候我可以建议你使用下面的调试办法,该办法不支持代码断点,只是能比较方便的看到Google的调试结果. 直接在你的HTMl中加入以下2段代码即可 <script src="//cdn.bootcss.com/erud…

移动端调试 vConsole

<head> <script src="path/to/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> </head> CDN地址:https://www.bootcdn.cn/vConsole/github地址: https://github.com/Tencent/vConsole/blob/dev/doc…

移动端调试工具Vconsole

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1…

移动端真机debug调试神器 vConsole学习（二）之实战

项目中实际使用在项目中实际使用的时候发现还是有很多问题的最初使用方式 <script src="vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); </script> 问题一:按照文档使用,发现页面引入JS的位置报警告警告:Cross-Origin Read Blocking…

浏览器端如何使用VConsole.js调试代码？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VConsole</title> </head> <body> <script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'>…

vConsole移动端调试利器

图示: , 简单的几步操作: 1. 引入cdn 可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo.html</title> <script src="https://cdn.bootcdn.net/aja…

移动端（微信等）使用 vConsole 调试 console

参考链接:https://blog.csdn.net/m0_37036014/article/details/80113635…

移动端 h5调试技巧

一安卓一 chrome 1.安卓手机安装chrome浏览器,手机打开开发者模式,用usb线链接电脑,并且允许调试. 2.电脑chrome地址栏输入 chrome://inspect 进入后点击 inspect 即进入调试模式(注意:第一次调试必须FQ). 3.调试和电脑端基本没有差异.电脑端修改样式等,手机立马变化. 二 webview 1.手机必须安卓4.4+ 2.安卓端必须打开允许调试的权限 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES…

移动端h5调试方法

charles代理使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理以iphone为例,长按住wifi, 进入下一页,可看到 HTTP代理-配置代理, 点击进去,进入下图的页面.然后在服务器和端口设置你电脑的ip和port(如192.168.20.46 和8888). 然后电脑上的charles会出现一个对话框,如下,请点击下allow. 2.手机安装证书打开手机的默认浏览器,如safari, 输入http://charle…

使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便.而 Android 系统,尤其是国内环境下的 Android 系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台.工程师们采用了各种各样的方式来对其进行调试:alert 大法,页面引入或注入VConsole/eruda开启移动…

工具 - vConsole调试工具在项目中的应用

最近做移动端项目比较多,电脑上开发完了上真机必现问题,但是真机上又看不了代码很捉急啊有没有. 这两天才发现这个腾讯良品vConsole,以前开发小程序见过,但没想到他竟然还能被应用到我们的h5页面中, 废话不多说,先给大佬磕一个. 具体描述介绍啥的见github:https://github.com/Tencent/vConsole 我这里先记录下具体开发中是怎么引用的 1.按照官网的步骤,先安装vConsole工具包: npm install vconsole 注:我当时在项目中使用,安装命令…