vConsole

영어 | 简体中文

v콘솔

모바일 웹페이지를 위한 가볍고 확장 가능한 프런트엔드 개발자 도구입니다.

vConsole은 프레임워크가 없으므로 Vue, React 또는 기타 프레임워크 애플리케이션에서 사용할 수 있습니다.

이제 vConsole은 WeChat Miniprograms의 공식 디버깅 도구입니다.

---

특징

• 로그: console.log|info|error|...
• 네트워크: XMLHttpRequest , Fetch , sendBeacon
• 요소: HTML 요소 트리
• 저장소: Cookies , LocalStorage , SessionStorage
• JS 명령을 수동으로 실행
• 맞춤형 플러그인

자세한 내용은 아래 스크린샷을 참조하세요.

---

릴리스 노트

최신 버전:

각 버전에 대한 자세한 릴리스 정보는 변경 로그에서 확인할 수 있습니다.

---

가이드

자세한 사용법은 튜토리얼을 참조하세요.

설치를 위해 vConsole을 프로젝트에 추가하는 두 가지 기본 방법이 있습니다.

방법 1: npm 사용(권장)

$ 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 ( ) ; 

방법 2: HTML에서 CDN 사용:

 < 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:

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

---

시사

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

---

스크린샷

개요

밝은 테마

어두운 테마

로그 패널

로그 스타일링

명령줄

시스템 패널

성능정보

다른 패널에 로그 출력

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

네트워크 패널

요청 세부정보

요소 패널

실시간 HTML 요소 구조

스토리지 패널

쿠키/LocalStorage/SessionStorage 추가, 편집, 삭제 또는 복사

---

선적 서류 비치

v콘솔:

• 지도 시간
• 공용 속성 및 메서드
• 내장 플러그인: 속성 및 방법

맞춤형 플러그인:

• 플러그인: 시작하기
• 플러그인: 플러그인 구축
• 플러그인: 이벤트 목록

---

타사 플러그인

• vConsole 소스
• vconsole-웹팩-플러그인
• vconsole-stats-플러그인
• vconsole-vue-devtools-플러그인
• vconsole-outputlog-플러그인
• vite-플러그인-vconsole

---

피드백

QQ 그룹: 497430533

---

특허

MIT 라이센스