Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/whinc/web-console
✨H5-based mobile web debugging tool similar to chrome devtools. 基于H5的移动端网页调试工具，类似于chrome devtools。
https://github.com/whinc/web-console
Last synced: 3 months ago
JSON representation
✨H5-based mobile web debugging tool similar to chrome devtools. 基于H5的移动端网页调试工具，类似于chrome devtools。
- Host: GitHub
- URL: https://github.com/whinc/web-console
- Owner: whinc
- Created: 2018-04-01T03:45:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T12:32:29.000Z (almost 2 years ago)
- Last Synced: 2024-07-19T19:12:13.817Z (4 months ago)
- Language: JavaScript
- Homepage: https://github.com/whinc/web-console
- Size: 10.3 MB
- Stars: 162
- Watchers: 5
- Forks: 16
- Open Issues: 17
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-github-star - web-console - based mobile web debugging tool similar to chrome devtools. 基于H5的移动端网页调试工具，类似于chrome devtools。 | whinc | 157 | (JavaScript)
README
# web-console
web-console 是一款基于 H5 开发的移动端 Web 调试工具。其高度还原了 Chrome DevTools 的功能和交互，支持 webpack 打包和``方式引入。
在线演示：<https://whinc.github.io/web-console/>
CDN 地址：<https://unpkg.com/@whinc/web-console>
[更多运行截图点击这里](https://github.com/whinc/web-console/blob/master/docs/snapshot.md)
## 功能特性
web-console 特性列表完成情况（可能会变动）：
- Element 面板
- 支持 DOM 树展示
- 支持查看 DOM 节点的继承样式
- 支持查看 DOM 节点的计算样式
- 支持查看 DOM 节点的盒模型
- Console 面板
- 支持 console 对象的 log/warn/info/error/debug 方法
- 支持 log 等日志方法的多参数输出
- 支持 log 等日志方法的参数格式化输出，已支持`%s, %i, %d, %f, %d, %o, %O, %c`
- 支持日志过滤
- Network 面板
- 支持`XMLHttpRequest`请求和响应的展示
- 支持`fetch`请求和响应的展示
- 支持响应数据的预览
- Application 面板
- 支持 cookie、localStorage 和 sessionStorage 的增删改查
- 支持 cookie、localStorage 和 sessionStorage 按关键字过滤
- Settings 面板
- 设置各面板默认行为
- 关于信息
- 插件
- 支持自定义插件
- 支持插件生命周期
- 支持插件偏好设置
- 支持使用内置组件
## 如何使用?
### 模块化方式导入
安装 npm 包
```
npm install @whinc/web-console
```
导入 web-console 并初始化
```js
import WebConsole from "@whinc/web-console";
new WebConsole();
```
或者，仅在开发模式下导入
```js
if (process.env.NODE_ENV === "development") {
import("@whinc/web-console").then(WebConsole => {
new WebConsole(config);
});
}
```
### `<script>`标签导入
在 html 文件中引入 web-console（依赖 Vue 2.x）
```html
<script src="https://unpkg.com/vue">
```
通过下面代码初始化
```js
new WebConsole(config);
```
## API
`WebConsole`构造参数如下：
| 字段 | 类型 | 必填 | 备注 |
| --------- | ------------ | ----- | ------------------------------------ |
| panelVisible | bool | false | 是否自动弹窗主面板 |
| activeTab | string | 'console' | 默认激活的 Tab 面板，支持'element', 'console', 'network', 'application', 以及插件的 id |
| entryStyle | string | 'button' | 入口样式，支持两种'button'和'icon' |
> 后续补充更多的配置参数和 API 接口
## 插件开发
web-console 提供一些开箱即用的功能，如果这些无法满足你的需求，你还可以通过 web-console 提供的插件机制，添加第三方编写的插件来扩展功能。
可参考下面资源：
- [插件开发文档](./docs/plugin.md)
- [插件项目模板](https://github.com/whinc/web-console-plugin)
## 更新日志
[CHANGELOG](CHANGELOG.md)
## 相似项目
**Web**
- [vConsole](https://github.com/Tencent/vConsole) A lightweight, extendable front-end developer tool for mobile web page.
- [eruda](https://github.com/liriliri/eruda) Console for mobile browsers
**Native**
- [wt-console](https://github.com/WeBankFinTech/wt-console) A lightweight, extendable react-native developer and tester tool
## License
MIT