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.
Open component in editor
To enable this feature, follow this guide.
This is only necessary when you want to build the extension yourself from source to get not-yet-released features.
Make sure you are using Node 6+ and NPM 3+
- Clone this repo
yarn installif you are using yarn as the package manager)
npm run build
- Open Chrome extension page
- Check "developer mode"
- Click "load unpacked extension", and choose
- Clone this repo
npm run dev
- A plain shell with a test app will be available at
Quick Start in chrome
// 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'
Testing as Firefox addon
$ npm install --global web-ext
Or, for Yarn:
$ yarn global add web-ext
Also, make sure
PATHis set up. Something like this in
$ PATH=$PATH:$(yarn global bin)
Build and run in Firefox
$ npm run build $ npm run run:firefox
When using Yarn, just replace
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!)