/vue-devtools

Chrome devtools extension for debugging Vue.js applications.
  1. JavaScript 49.8%
  2. Vue 46.2%
  3. HTML 1.9%
  4. CSS 1.8%
  5. Shell 0.3%
JavaScript Vue HTML CSS Shell
Find file
Latest commit 2c3af6f Nov 25, 2016 @yyx990803 yyx990803 bump deps
Permalink
Failed to load latest commit information.
media add gif Mar 4, 2016
shells bump deps Nov 26, 2016
src Change attached and detached lifecycle hooks in mixin (#185) Nov 22, 2016
test fix tests after events module addition Nov 21, 2016
.eslintrc update lint Jun 21, 2016
.gitignore ignore todos Aug 13, 2016
LICENSE Add License (#114) Jun 6, 2016
README.md Update Readme (#186) Nov 22, 2016
package.json bump deps Nov 26, 2016

README.md

vue-devtools

Important Usage Notes

  1. 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.

  2. 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.

screenshot

Works with vuex for time-travel debugging:

demo

Installation

Currently only a Chrome devtools extension is available.

Get it on the Chrome Web Store.

Manual Installation

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

  1. Clone this repo
  2. npm install
  3. npm run build
  4. Open Chrome extension page
  5. Check "developer mode"
  6. Click "load unpacked extension", and choose shells/chrome.

Hacking

  1. Clone this repo
  2. npm install
  3. npm run dev
  4. A plain shell with a test app will be available at localhost:8080.

License

MIT