Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hu3dao/vite-plugin-debug
A plugin for vite that enable mobile debugging
https://github.com/hu3dao/vite-plugin-debug
Last synced: 2 months ago
JSON representation
A plugin for vite that enable mobile debugging
- Host: GitHub
- URL: https://github.com/hu3dao/vite-plugin-debug
- Owner: hu3dao
- Created: 2022-10-24T02:40:35.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2022-11-16T10:44:55.000Z (over 1 year ago)
- Last Synced: 2024-03-25T12:22:51.865Z (3 months ago)
- Language: TypeScript
- Size: 98.6 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-viter - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-debug - Base on specific url parameters dynamically enables mobile web page debugging. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-debug
**English** | [中文](./README.zh-CN.md)
## Introduction
Vite-plugin-debug is a vite plugin that dynamically enables mobile web page debugging based on specific url parameters, Built-in vconsole and eruda debugging tools
- [vconsole github](https://github.com/Tencent/vConsole)
- [eruda github](https://github.com/liriliri/eruda)
## Installation
```bash
npm install vite-plugin-debug -D
# or
yarn add vite-plugin-debug -D
# or
pnpm add vite-plugin-debug -D
```
## Config
### enabled
- intro：Whether to enable plugin
- type：boolean
- default：true
### apply
- intro：Apply the plugin only for serve or build，value is undefined，Apply the plugin for serve and build
- type：'serve' | 'build' | undefined
- default：undefined
### tool
- intro：Which built-in debugging tool to use
- type：'vconsole' | 'eruda'
- default：vconsole
### src
- intro：The cdn of the debugging tool，**use src，must use code**
- type：string | undefined
- default：undefined
- example：https://cdn.bootcdn.net/ajax/libs/vConsole/3.14.7/vconsole.min.d.ts
### code
- intro：Run the debugging tool init method code，**use code，must use src**
- type：string | undefined
- default：undefined
- example：new window.VConsole();
### enabledByKey
- intro：Enable the debugging tool dynamically based on specific url parameters
- type：string
- default：debug,
### enabledByValue
- intro：Check whether the value of **enabledByKey** meets the condition
- type：string
- default：'1'
## Usage
- no params
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug()],
});
```
- not enabled
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ enabled: false })],
});
```
- apply the plugin only for serve
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ apply: 'serve' })],
});
```
- custom src and code
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [
vue(),
debug({
src: 'https://unpkg.com/[email protected]/eruda.js',
code: 'eruda.init();',
}),
],
});
```
- custom enabledByKey and enabledByValue
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [vue(), debug({ enabledByKey: 'open', enabledByValue: 'true' })],
});
```
- complete config
```ts
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import debug from 'vite-plugin-debug';
export default defineConfig({
plugins: [
vue(),
debug({
enabled: true,
apply: 'serve',
src: 'https://unpkg.com/[email protected]/eruda.js',
code: 'eruda.init();',
enabledByKey: 'open',
enabledByValue: 'true',
}),
],
});
```
## License
[MIT](LICENSE)