vuejs/vue-devtools

README.md
vue-devtools
screenshot

Installation
Get the Chrome Extension / (beta channel)

Get the Firefox Addon / (beta channel)

Get standalone Electron app (works with any environment!)

Important Usage Notes
If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won’t show up.

To make it work for pages opened via file:// protocol, you need to check “Allow access to file URLs” for this extension in Chrome’s extension management panel.

The events tab only show custom events emitted by a component. More information on custom events can be found in the documentation.

Open component in editor
To enable this feature, follow this guide.

Manual Installation
This is only necessary when you want to build the extension with the source repo to get not-yet-released features.

Make sure you are using Node 6+ and NPM 3+

Clone this repo
cd vue-devtools the newly created folder
run yarn install
then run yarn run build
Open the Chrome extension page (currently under Menu > More Tools > Extensions)
Check “developer mode” on the top-right corner
Click the “load unpacked” button on the left, and choose the folder: vue-devtools/packages/shell-chrome/
Alternatively to step 3, you can also use yarn dev:chrome to build & watch the unpacked extension
Development
Clone this repo
run yarn install
then run yarn run dev
A plain shell with a test app will be available at localhost:8100.
Testing as Firefox addon
Install web-ext

$ yarn global add web-ext
Also, make sure PATH is set up. Something like this in ~/.bash_profile:

$ PATH=$PATH:$(yarn global bin)
Build and run in Firefox

$ yarn run build
$ yarn run run:firefox
Force enable the devtools
// Before you create app
Vue.config.devtools = process.env.NODE_ENV === ‘development’

// After you create app
window.VUE_DEVTOOLS_GLOBAL_HOOK.Vue = app.constructor

// then had to add in ./store.js as well.
Vue.config.devtools = process.env.NODE_ENV === ‘development’
Common problems and how to fix
Fixing “Download the Vue Devtools for a better development experience” console message when working locally over file:// protocol: 1.1 - Google Chrome: Right click on vue-devtools icon and click “Manage Extensions” then search for vue-devtools on the extensions list. Check the “Allow access to file URLs” box.

How to use the devtools in IE/Edge/Safari or any other browser? Get the standalone Electron app (works with any environment!)

License
MIT