Powered by GitBook

控制台小工具

相对于PC端可以直接使用浏览器进行调试，移动端在不使用任何调试工具的情况下无法简单方便得获得console命令中打印出的信息，以下工作可让开发者快捷的在手机前端页面看到log日志。

vConsole

vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题，提供针对手机网页的前端console调试面板。

使用方法：

下载js文件或者npm安装
```
npm install vconsole
```
复制dist/vconsole.min.js到项目中。
调试模式下，在html中引入js文件
```
// 普通引入
<head> <script src='path/to/vconsole.min.js'></script> </head>
// CommonJS或SeaJSAMD/CMD规范的模块加载方式
var vConsole =require('path/to/vconsole.min.js');
```
功能介绍

目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。
```
console.log('foo'); // 白底黑字  
console.info('bar'); // 白底紫字  
console.debug('oh'); // 白底黄字  
console.warn('foo'); // 黄底黄字  
console.error('bar'); // 红底红字
```
第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。

默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。

AlloyLever

AlloyLever是腾讯Alloyteam开发的一款移动端控制台小工具。

使用方法

1、安装
```
npm install alloylever
```
2、在你的页面任何地方引用下面脚本就可以，但是该js必须引用在其他脚本之前。
```
<script src="alloylever.js"></script>
```

功能介绍

点击alloylever按钮之间切换显示或隐藏工具面板
Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]
Console会输出所有的错误信息(脚本错误和网络请求错误)
XHR面板会输出所有（XMLHttpRequest）AJAX请求和服务器端返回的数据
Resouces面板会输出所有的Cookie信息和LocalStorage
TimeLime面板会输出页面相关的生命周期里的时间段耗时情况

Eruda

results matching ""

No results matching ""