来着微信团队开源的一个调试工具,[GitHub地址]https://github.com/Tencent/vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

特性

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies 和 localStorage
  • 手动执行 JS 命令行
  • 自定义插件

上手

下载 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>

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

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

打印日志

  • 与 PC 端打印 log 一致,可直接使用 console.log() 等方法直接打印日志
console.log('Hello World');

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

  • 支持 4 种不同类型的日志,会以不同的颜色输出到前端面板
console.log('foo');     //白底黑字
console.info('bar'); //白底紫字
console.debug('oh'); //白底黄字
console.warn('foo'); //黄底黄字
console.error('bar'); //红底红字
  • 支持打印 Object 对象,会以 JSON 字符串格式输出
var obj = {};
obj.foo = 'bar';
console.log(obj); // 打印出 {foo: 'bar'}

手机预览

前端读者 | 前端开发者调试面板vConsole的更多相关文章

  1. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

  2. 前端读者 | 前端面试基础手册(HTML+CSS)

    本文来自@羯瑞:希望前端面试基础手册能帮助要找工作的前端小伙伴~~ HTML 前端需要注意哪些SEO? 合理的title.description.keywords:搜索对着三项的权重逐个减小,titl ...

  3. 前端读者 | 前端用户体验-UI动效设计

    本文来自互联网 @羯瑞 整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...

  4. 手机前端开发调试利器 – vConsole

    我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log: (2) 上线后,某用户表示页面失灵,但我们自己 ...

  5. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  6. Eruda——手机网页前端调试面板

    前言 进行移动端网页开发时,想要查看手机浏览器信息从来都不是一件容易的事.特别是当目标环境为APP内置WebView,需要调用特定的JsBridge接口时,你根本都干不了什么,只能一遍又一遍地修改代码 ...

  7. [转帖]前端-chromeF12 谷歌开发者工具详解 Network篇

    前端-chromeF12 谷歌开发者工具详解 Network篇 https://blog.csdn.net/qq_39892932/article/details/82493922 blog 也是原作 ...

  8. [转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇

    前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...

  9. [转帖]前端-chromeF12 谷歌开发者工具详解 Console篇

    前端-chromeF12 谷歌开发者工具详解 Console篇 https://blog.csdn.net/qq_39892932/article/details/82655866 趁着搞 cloud ...

随机推荐

  1. openstack安装问题

    KeyStone NoHandlers Errorroot@openstack-dev-r910:/home/brent/openstack# ./keystone_data.shNo handler ...

  2. DOM基本代码一

    dom学习基本代码第一部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  3. sub-G 无线芯片基础知识

    1.典型无线收发机编码 2.前导码的作用是使接收机的时钟和发射机同步(有待验证),如果接收机工作在WOR模式,前导码还有唤醒接收机的功能(接收一定数量的前导码),此时发射机必须发送较长的前导码才能把接 ...

  4. oracle xml操作

      /*=====================生成\修改xml========================= */ --xmlelement多个标签层级 SELECT XMLELEMENT(& ...

  5. CSS3知识之阴影box-shadow

    一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow   ...

  6. vijos 1180 选课 树形DP

    描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修了这M门课并考核通过就能获得 ...

  7. c# Stream to File的知识点

    个人倾向使用File.WriteAllByte写入文件: //Stream to File MemoryStream ms=...Stream; ms.Position = ; byte[] buff ...

  8. Spring Security 过滤器链

    Alias Filter Class Namespace Element or Attribute CHANNEL_FILTER ChannelProcessingFilter http/interc ...

  9. mybatis 插入语句name no find

    1.可参考连接:https://www.cnblogs.com/thomas12112406/p/6217211.html 2.dao层的配置 void addUser(@Param("un ...

  10. Python面向对象学习2(面向对象的语法和特性,待更新)

    上一个内容我们介绍了面向对象和面向对象场景现在我们来学习下语法和特性 1,面向对象基本语法: # -*- coding:utf-8 -*- # Author: Colin Yao class Dog( ...