Chrome devtools extension for debugging Vue.js applications.
JavaScript Vue CSS HTML Shell
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 235 commits behind vuejs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
media
shells
src
test
.eslintrc
.gitignore
LICENSE
README.md
package.json
yarn.lock

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.

demo

Works with vuex for time-travel debugging:

demo

Installation

Manual Installation

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

  1. Clone this repo
  2. npm install (Or yarn install if you are using yarn as the package manager)
  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