vConsole

Inglês | 简体中文

vConsole

Uma ferramenta de desenvolvedor front-end leve e extensível para páginas da web móveis.

vConsole não tem framework, você pode usá-lo em Vue ou React ou qualquer outro aplicativo de framework.

Agora vConsole é a ferramenta oficial de depuração para miniprogramas WeChat.

---

Características

• Registros: console.log|info|error|...
• Rede: XMLHttpRequest , Fetch , sendBeacon
• Elemento: árvore de elementos HTML
• Armazenamento: Cookies , LocalStorage , SessionStorage
• Execute o comando JS manualmente
• Plug-ins personalizados

Para obter detalhes, veja as imagens abaixo.

---

Notas de versão

Versão mais recente:

Notas de lançamento detalhadas para cada versão estão disponíveis no Changelog.

---

Guia

Consulte o Tutorial para obter mais detalhes de uso.

Para instalação, existem duas maneiras principais de adicionar vConsole a um projeto:

Método 1: usando npm (recomendado)

$ npm install vconsole

 import VConsole from 'vconsole' ;

const vConsole = new VConsole ( ) ;
// or init with options
const vConsole = new VConsole ( { theme : 'dark' } ) ;

// call `console` methods as usual
console . log ( 'Hello world' ) ;

// remove it when you finish debugging
vConsole . destroy ( ) ; 

Método 2: usando CDN em HTML:

 < script src =" https://unpkg.com/vconsole@latest/dist/vconsole.min.js " > </ script >
< script >
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window . VConsole ( ) ;
</ script >

CDN disponível:

• https://unpkg.com/vconsole@latest/dist/vconsole.min.js
• https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

---

Visualização

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

---

Capturas de tela

Visão geral

Tema claro

Tema escuro

Painel de registro

Estilo de registro

Linha de comando

Painel do sistema

Informações de desempenho

Logs de saída para painel diferente

 console . log ( 'output to Log panel.' )
console . log ( '[system]' , 'output to System panel.' )

Painel de Rede

Solicitar detalhes

Painel de elementos

Estrutura de elementos HTML em tempo real

Painel de armazenamento

Adicionar, editar, excluir ou copiar Cookies / LocalStorage / SessionStorage

---

Documentação

vConsole:

• Tutorial
• Propriedades e métodos públicos
• Plug-in integrado: propriedades e métodos

Plug-in personalizado:

• Plug-in: primeiros passos
• Plug-in: Construindo um Plug-in
• Plug-in: Lista de Eventos

---

Plug-ins de terceiros

• Fontes vConsole
• plugin vconsole-webpack
• plug-in vconsole-stats
• plugin vconsole-vue-devtools
• plugin vconsole-outputlog
• vite-plugin-vconsole

---

Opinião

Grupo QQ: 497430533

---

Licença

A licença do MIT