/vue-devtools forked from vuejs/vue-devtools

Chrome devtools extension for debugging Vue.js applications.
  1. JavaScript 55.1%
  2. Vue 40.3%
  3. HTML 2.2%
  4. CSS 2.1%
  5. Shell 0.3%
JavaScript Vue HTML CSS Shell
Switch branches/tags
Nothing to show
Find file
Clone or download

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Download ZIP

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop...

If nothing happens, download GitHub Desktop and try again.

Launching Xcode...

If nothing happens, download Xcode and try again.

Launching Visual Studio...

If nothing happens, download the GitHub extension for Visual Studio and try again.

Pull request Compare This branch is 397 commits behind vuejs:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
media
shells
src
test
.eslintrc
.gitignore
LICENSE
README.md
package.json

README.md

vue-devtools

Important Usage Notes

  1. vue-devtools only works with Vue.js 1.0.0+.

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

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