1.了解vConsole是一个什么和能做什么
vConsole是针对手机网页的前端Console调试面板,相当于电脑大部分浏览器都自带的F12开发者工具
我们在写web app或者移动端网页需要嵌入到app时候,特别是使用了APP自带的Web View来加载我们的网页时,很难查询到我们想要的数据. 并且出错时进行调试需要打印日志时,尤为困难.
而这个工具可以让我们和在PC使用devtools时一样,查看日志,网络,页面元素等
2.安装,使用vConsole
项目地址:https://github.com/Tencent/vConsole
下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）
或者使用 npm 安装：
npm install vconsole
引入 dist/vconsole.min.js 到项目中：
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
对于 TypeScript，可引入 d.ts 文件：
import 'path/to/vconsole.min.d.ts';
当然有的人不想下载,直接进入链接https://gitee.com/mirrors/vConsole/raw/master/dist/vconsole.min.js，将文本内容复制到xxx\build\web-mobile目录下，若想加入模板中则复制到xxx\build-templates\web-mobile目录下。
在网页里加入
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script type="text/javascript">
let vConsole = new VConsole();
</script>
进行使用
演示图
右下角的小绿标就是vConsole了
log
打开后默认处于Log的all页面
底部可以输入JavaScript代码进行执行,clear为清除日志,hide为隐藏控制面板
也是最常用的东西
system
network
element
storage
后面4个页面分别为
System----查询浏览器框架信息界面
Network----监听网络数据界面
Element----查询网页元素信息界面
Storage----查询储存信息界面(Cookies,LocalStorage,SessionStorage)
3.在QQ和微信中使用vConsole
腾讯大部分APP内的网页服务基本都是基于TBS X5内核(Tencent TBS X5)
首先我们需要通过QQ和微信打开http://debugtbs.qq.com
最简单的方式就是把连接随便找个人发过去,然后点击,然后会打开一个这个网页
tbs安装界面
选择安装线上内核，等待下载和安装后，然后重启即可,安装后可以看到倒数第二行有一个Debugx5的选择,或者直接打开http://debugx5.qq.com
勾选打开vConsole重新打开网页即可看见右下角的vConsole绿框，如果没出现可尝试关闭网页再次打开，循环往复．同时还提供了小程序开发调试等功能，方便开发．
网友评论