html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...

vConsole

一个针对手机网页的前端 console 调试面板。

简介

vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。

手机预览

使用方法

1.下载模块

checkout 文件 dist/vconsole.min.js 到本地。

2.引入模块

(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在

中引入：

(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 require() 引入模块：

var vConsole = require('path/to/vconsole.min.js');

3.打印 log 日志

(1) 与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志：

console.log('Hello World');

未加载 vConsole 模块时，console.log() 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。

(2) 支持 4 种不同类型的日志，会以不同的颜色输出到前端面板：

console.log('foo'); // 白底黑字

console.info('bar'); // 白底紫字

console.debug('oh'); // 白底黄字

console.warn('foo'); // 黄底黄字

console.error('bar'); // 红底红字

(3) 支持打印 Object 对象，会以 JSON 字符串格式输出：

var obj = {};

obj.foo = 'bar';

console.log(obj); // 打印出 {foo: 'bar'}

(4) 支持传入多个参数，会以空格隔开：

var uid = 233;

console.log('UserID:', uid); // 打印出 UserID: 233

(5) 引入模块后，vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志，请使用 vConsole.ready() 方法：

// 若未通过 AMD/CMD 方式加载模块，

// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole

vConsole.ready(function() {

console.log('Hello World');

});

注意事项

引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。

若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。动态引入模块的方法可参考 example/demo2.php 示例。

更新记录

License

html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...相关推荐

vConsole：针对手机网页的前端开发者调试面板,手机web页面console.log 功能，如 Chrome devtools 上一样。
vConsole:针对手机网页的前端开发者调试面板,移动短端console.log 功能,如devtools 上一样. 我们在开发手机版网页的时候,常常会出现下面的情景:开发时,在自己电脑上运行得好好 ...
Vue 如何调试手机端网页，VConsole 手机网页的前端 console 调试面板
一.安装使用 npm : npm install vconsole 二.在Vue项目中引入在 mian.js 文件夹中引入,并判断production环境使用 import VConsole fr ...
手机查看html效果,使用IE浏览器查看页面手机端效果的方法
近期制作手机端页面比较多,经常会遇到在PC端模拟手机端样式的时候,一般情况下是用chrome进行模拟,但是也有的时候,我们可以用IE模拟,我讲的IE是win10里面的Edgee. 方法/步骤首先,我 ...
vue页面手机端开发总结
当图片的某元素是一张图片,可不设置宽高,将样式设置为如下,这样图片就会撑起来页面,避免一些宽高在不同机型不协调的问题. display: block; width: 100%; 需要条件判断显示不同的 ...
服务器端往手机端推送数据的问题（手机解决方案）
1.方案一: 思路:使用socket连接,在手机端开个socketserver,然后服务器端连接手机端,实现服务器端的不定时发送数据. MIDlet关闭时, 你可以通过sms激活它. midlet运行 ...
python手机端下载-Python3,x：如何进行手机APP的数据爬取
Python3,x:如何进行手机APP的数据爬取一.简介平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来 ...
天猫HTML练手项目,GitHub - txz1220/tianmao: 一个模仿天猫网页的项目
一个模仿天猫网页的项目主要涉及到前端方面,后端暂无. 主要目的:拿来练手用的本项目主要是联系使用,所以css js 都放在html页面上了. 知识点学习: 1.html 要有个布局框架 2.css ...
java开发手机网页_前端编写手机兼容页面（简易方式）
这两天开始编写手机页面,作为类似官网一样的使用,因为实在手机端访问的web端,没有做过尝试,而且由于手机的种类很多,导致兼容性要求很高,在网上找了一些教程,制作完毕后决定分析给大家. 先给大家看下成品 ...
html页面手机端console,vue项目以及独立HTML项目在手机端查看控制台日志 vconsole
1 先说vue项目的在入口文件index.html 添加 // 移动端调试 // 初始化 var vConsole = new VConsole(); 然后npm run build 就可以查看控制 ...

html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...

html页面手机端console,GitHub - MobileHTML5/vConsole: 一个针对手机网页的前端 console 调试面板。...相关推荐

最新文章

热门文章