1 Star 0 Fork 86

wsyforever / vConsole

forked from 腾讯开源 / vConsole 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

English | 简体中文

vConsole

npm version

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

特性

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

上手

方法一:使用 npm(推荐)

$ npm install vconsole

Import 并初始化后,即可使用 console.log 功能,如 Chrome devtools 上一样。

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用 options 选项初始化
const vConsole = new VConsole({ maxLogNumber: 1000 });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();

方法二:使用 unpkg 的 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

详细使用方法请参阅使用教程

手机预览

http://wechatfe.github.io/vconsole/demo.html

文档

vConsole 本体:

插件:

第三方插件列表

更新记录

CHANGELOG_CN.md

交流反馈

QQ 群:497430533

License

The MIT License

English | [简体中文](./README_CN.md) vConsole ============================== [![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole) A lightweight, extendable front-end developer tool for mobile web page. ## Features - View console logs - View network requests - View document elements - View Cookies, LocalStorage and SessionStorage - Execute JS command manually - Custom plugin ## Usage Method 1: Using npm (Recommanded) ```bash $ npm install vconsole ``` ```javascript import VConsole from 'vconsole'; const vConsole = new VConsole(); // or init with options const vConsole = new VConsole({ maxLogNumber: 1000 }); // call `console` methods as usual console.log('Hello world'); // remove it when you finish debugging vConsole.destroy(); ``` Method 2: Using unpkg CDN in HTML: ```html <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script> <script> // VConsole will be exported to `window.VConsole` by default. var vConsole = new window.VConsole(); </script> ``` See [Tutorial](./doc/tutorial.md) for more usage details. ## Preview ![](./example/snapshot/qrcode.png) [http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html) ![](./example/snapshot/panel_log.jpg) ![](./example/snapshot/panel_network.jpg) ![](./example/snapshot/panel_element.jpg) ![](./example/snapshot/panel_storage.jpg) ## Documentation vConsole: - [Tutorial](./doc/tutorial.md) - [Public Properties & Methods](./doc/public_properties_methods.md) - [Helper Functions](./doc/helper_functions.md) Plugin: - [Plugin: Getting Started](./doc/plugin_getting_started.md) - [Plugin: Building a Plugin](./doc/plugin_building_a_plugin.md) - [Plugin: Event List](./doc/plugin_event_list.md) ## Third-party Plugins - [vConsole-sources](https://github.com/WechatFE/vConsole-sources) - [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin) - [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats) - [vconsole-vue-devtools-plugin](https://github.com/Zippowxk/vue-vconsole-devtools) - [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin) - [vite-plugin-vconsole](https://github.com/vadxq/vite-plugin-vconsole) ## Changelog [CHANGELOG.md](./CHANGELOG.md) ## Feedback QQ Group: 497430533 ![](./example/snapshot/qq_group.png) ## License [The MIT License](./LICENSE)

简介

一个轻量、可拓展、针对手机网页的前端开发者调试面板 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/wsyforever/vConsole.git
git@gitee.com:wsyforever/vConsole.git
wsyforever
vConsole
vConsole
dev

搜索帮助

344bd9b3 5694891 D2dac590 5694891