[comment]: <> ([](https://www.npmjs.com/package/vue-debugger))

Vue.js Console Debugger

Demo

- https://vue-debugger.octa-code.com/

Setup

``bash
npm install --save vue-debugger
`

Add dependencies to your main.js:

`javascript
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

`

Trigger notifications from your .vue files:

`javascript
// capture console.XXX and other errors.
console.log('Hello')
console.error('Hello')
`

`javascript
// 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:

`javascript
import Vue from 'vue'

Vue.debug.log('Logged by Vue')
`


Usage

$3

#### nuxt.config.js

`js
plugins: [
{ src: 'plugins/vue-debugger-ssr.js', ssr: false }
]
`

#### vue-debugger-ssr.js

`js
import Vue from 'vue';
import VueDebugger from 'vue-debugger';
import 'vue-debugger/dist/vue-debugger.css';

Vue.use(VueDebugger);
`




$3

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

`bash


run the demo


cd demo
npm install
npm run serve
``