vue-debugger
v1.0.10
Published
Vue.js console debugger component and utility. Onscreen realtime console logger.
Downloads
5
Maintainers
Readme
Vue.js Console Debugger
Demo
- https://vue-debugger.octa-code.com/
Setup
npm install --save vue-debugger
Add dependencies to your main.js
:
import Vue from 'vue'
import VueDebugger from 'vue-debugger'
import 'vue-debugger/dist/vue-debugger.css'
Vue.use(VueDebugger)
Add the global component to your App.vue
:
<vue-debugger/>
Trigger notifications from your .vue
files:
// capture console.XXX and other errors.
console.log('Hello')
console.error('Hello')
// simple direct plugin
this.$debug.log('Hello World!')
this.$debug.warn('A warning message')
Or trigger logs from other files, for example, your store / router:
import Vue from 'vue'
Vue.debug.log('Logged by Vue')
Usage
Nuxt.js
nuxt.config.js
plugins: [
{ src: 'plugins/vue-debugger-ssr.js', ssr: false }
]
vue-debugger-ssr.js
import Vue from 'vue';
import VueDebugger from 'vue-debugger';
import 'vue-debugger/dist/vue-debugger.css';
Vue.use(VueDebugger);
Features
| Features | Type | Description |
| ---------------------------- | ------------- | ------------------------------------------------------------ |
| console.XXX
capture | log | Auto collect all usages of console log levels. |
| Vue.debug.XXX
log | log | Log directly to component view but not to browser console. |
| Expand - Minimize | view | View Modes control to minimize, expand console view. |
| clear | view | Clear console messages. |
| expanded: Boolean
| prop | Mount console expanded. |
FAQ
Check closed issues with FAQ
label to get answers for most asked questions.
Development
To run a local demo:
# run the demo
cd demo
npm install
npm run serve