I'm not sure but it seems vue-devtools is still trying to get "state" from components instead of "getters:

https://github.com/vuejs/vue-devtools/blob/master/src/devtools/components/ComponentInspector.vue#L25

Anyway: I was able to see the computed states in the component inspector before upgrading to Vuex 0.6.1... now I can't see the corresponding getters

EDIT: already realized that the linked code is not related to the issue; anyway, the issue exists: I could see the computed "getters" (state) in the component inspector, but now I can't see anymore

It would be very helpful if I could auto expand all components and all state variables. I would save a lot of time and energy not being forced to touch the mouse every time I switch component :)

I need dynamic < title > so I choose 'html' as root el for vue. but vue-devtools scans the document starting from document.documentElement's child nodes thus document.documentElement itself is not scanned. would you please fix it? thx.

I opened my Chrome Devtool today and now the Vue Devtool menu is gone.

Am i the only one have this problem?

Im using Chrome Version 47.0.2526.80

Safari is much faster than chrome, it could be great to have this extension :)

Thanks !

it would be great to support the new dark theme :)

I've installed the vue-devtools1.0 and opened the vue-hacknews, could't find the Vue-devtools in the Chrome-dev-tools.

But the local demo with vue-loader-example is ok.

It'd be nice if the updates happened in real time. Right now you need to navigate away and back to an element to detect any changes in the scope.

Is it possible? The description states that file:// protocol is unaccessible. Is this a fundamental limitation for all devtools extensions?
I tried to load it using the following instruction, and the Electron shell processes it without errors and adds it to the DevTools Extensions file, but the new tab doesn't show up.

Hi,

so on most of complex views I get displayed following error when inspecting inner elements (mostly elements in inner component):

 message: "Converting circular structure to JSON"

Hello

Could you please add scrollbars? With mouse without scroll or RSI (with which you should not use mouse scroll), it's not very comfortable to scroll long lists.

Thanks for your great work.

I found that for some reason there are a couple of components in my app witch trigger this error:

Uncaught DataCloneError: Failed to execute 'postMessage' on 'Window': An object could not be cloned.

It is in this piece of code..

Can we do something with this?

Do you plan to have a feature to edit the state right there in the app / tree view, right now it just displays the values but you can't edit them.

I can't pinpoint where or how to reproduce but if you check out Players World of Warships and expand down in to the list of "VueTeamRow" components, you will see that the Components are not in DOM order.

The "VueTeamRow" components with arrows next to them indicate the first three rows with icons. They don't seem to be in any order.

if (rect.top === 0) debugger;

I am working with a deeply nested JSON object, and I am getting an "Uncaught TypeError: Converting circular structure to JSON" error when I try to examine my component in devtools.

I know that there is not much in this report to go on, so what could I provide to help troubleshoot?

My code is not minified, how come I cannot use the devtools?

I am using this by the way:

window.Vue = require('vue');

require('vue-resource');`

Running browserify on it then.

Thanks for such an awesome devtool, it's really helpful. The problem I'm having is when I create a new Vue({ ... }) instance in a place such as $.ajax(...).done(function () { /* here */ }) this devtool doesn't show it. Is that something I'm doing wrong? Do you need a full example to reproduce the issue?

With the last update 2016-03-08 the tab content don't appear. I'm using Windows 7 and Chrome 49.0.2623.75

Please make this text selectable using mouse.
http://dl.dropbox.com/u/5883466/screenshots/screen160303-142247.png

Sometimes its needed to select some values (ids, etc) or whole structure to copy/paste it.
Also it would be cool to have "Copy as JSON" button right to "Send to console" button.

I have a slight concern about having devtools always available with any Vue build type.

This is because if the application has a security exploit, the dev tools make it increasingly easy to exploit this vulnerability. Such as poorly handled authentication. I know this is purely down to bad development, but the dev tools should only be available when hooks are available, this will prevent exploitation.

Could there be an additional option to make vue-devtools always available. To me it makes more logical sense to be defensive for production builds.

Looks like $children array can be undefined at least then instance._inactive is true.
It causes this to fail with error:

backend.js:321 Uncaught TypeError: Cannot read property 'map' of null

When exploring the component data in the devTools tab you can only watch the tree, but there is no way of copying the text. Allowing that would be useful.

Just checked out the repo, installed the extension and did as instructed. This is what error message I get in chrome when trying to load shells/chrome. I'm on Windows 10.
Chrome: Version 47.0.2526.80 m

Failed to load extension from: ~\Desktop\vue-devtools\shells\chrome
Could not load background script 'build/background.js'.

I am receiving the error below:

code: 11
message: "Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('number') does not support selection."
name: "InvalidStateError"
stack: "Error: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('number') does not support selection.↵ at Error (native)↵ at Object.stringify (native)↵ at setPanelContent (:39:31)↵ at :54:3↵ at Object.InjectedScript._evaluateOn (:847:140)↵ at Object.InjectedScript._evaluateAndWrap (:780:34)↵ at Object.InjectedScript.evaluate (:646:21)"
proto: DOMException

This might be due to using jQuery within the vuejs scope?

Sometimes I get this error and have some trace

Uncaught RangeError: Maximum call stack size exceeded                   $.cof.js:3
module.exports  @   $.cof.js:3
module.exports  @   $.classof.js:13
toString    @   es6.object.to-string.js:8
exports.isPlainObject   @   lang.js:276
sanitize    @   backend.js:468
(anonymous function)    @   backend.js:471
forEach @   (program):950
sanitize    @   backend.js:470
(anonymous function)    @   backend.js:471
forEach @   (program):950
postMessage (async)     
sendMessageToBackend    @   proxy.js:65
EventImpl.dispatchToListener    @   extensions::event_bindings:387
publicClass.(anonymous function)    @   extensions::utils:94
EventImpl.dispatch_ @   extensions::event_bindings:371
EventImpl.dispatch  @   extensions::event_bindings:393
publicClass.(anonymous function)    @   extensions::utils:94
dispatchOnMessage   @   extensions::messaging:310

Vue Devtools 1.0.2

I downloaded vue-loader-example and installed Vue Devtools extension for Chrome. I can get the example working by running npm run dev. The problem is that I don't see the Vue Devtools tab on my Chrome devtools.

I'm running Chrome version 46.0.2490.86 on my Macbook Pro.

When I click a certain component, I get errors and warnings in the console that are non-sensical.

E.g. the following error and warning show up:

Uncaught TypeError: Cannot read property 'validation' of null
[Vue warn]: Error when evaluating expression "function isValid() {
      var type = this.validation;
      var value = this.value;

      return (0, _helpers.validate)(type, value);
    }". 

That code is in a component called formInput.vue and has nothing to do with what I select in the devtools. It's not even part of the tree I'm inspecting.

When I test my app on my android device, I use the Chrome Remote Dev Tools as described in this article, but the Vue Dev Tools isn't there.
It shows up only on a normal webpage on my desktop.

Also, window.__VUE_DEVTOOLS_GLOBAL_HOOK__ isn't defined.

Maybe we could create a dark theme

Is it possible to have a version for for firefox?

When i click to component into the devtool - window scrolling to the wrong offset instead of to actual component offset.

This issue appears in two cases:

1 . When component has ancestor element with css property position: relative|absolute

scrollIntoView function uses node.offsetTop for determine element offset, but this value calculates related to first parent element what has relative|absolute position in css.

So this is why page often scrolls to incorrect offset.

Solution is - use node.getBoundingClientRect().top instead of node.offsetTop

2 . When component is fragment AND previous sibling element is hidden (display:none)

scrollIntoView trying to get offset of previous sibling because of fragment element is text node. But! previous element can be hidden(display:none) and in this case window scrolls to 0 offset

ENV:
Lubuntu 15.10
Google Chrome 47.0.2526.106 (64-bit)
Vue.js devtools 1.0.5
Vue1.0.13 Live Mode

Install with:

1. Download zip and unzip
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`.

(1) When go to subroute, the error occured when click the Root node:

Uncaught TypeError: Converting circular structure to JSON     extensions::SafeBuiltins:82

Details:

Save.stringify                       @extensions::SafeBuiltins:82
PortImpl.postMessage                 @extensions::messaging:53
target.(anonymous function)          @extensions::SafeBuiltins:19
publicClass.(anonymous function)     @extensions::utils:94
sendMessageToDevtools                @proxy.js:73

(2) Sometime appear two same vue.js devtools, by reopen Chrome dev tools to solve.

Let's see if I can explain this because it is kind of weird:

Given that we have a property set to a certain value.
We react to a DOM event by setting this property to another value.
The value will show in dev tools with its original value (not update) unless the value is called anywhere in the template.
If we send the component to the console, $vm.property will give the correct value, however the property in the devtools window will not change.
So the value actually changes, but devtools will not react to its change unless the value is called in the template.

Template:

<a href="#0" v-for="item in items" 
    @mouseover="setActiveItem($index)"
    @mouseout="unsetActiveItem"
    v-bind:style="currentItemMarker($index)">
</a>

Methods:

setActiveItem: function(index) {
    setTimeout(function() {
          return this.activeItem = index;
      }.bind(this), 300)
},
unsetActiveItem: function() {
  this.activeItem = false;
}

Now this does not update the activeItem property on the devtools window. The data however is reactive and its value changes on mouseover. In fact if we do this:

<a href="#0" v-for="item in items" 
    @mouseover="setActiveItem($index)"
    @mouseout="unsetActiveItem"
    v-bind:style="currentItemMarker($index)">{{ activeItem }}
</a>

Devtools will show the changes, the trick being "activeItem" is being called inside the template.

Makes sense? Is this behavior expected?

Chrome 51.0.2679.0 dev-m (64-bit)

I'm using vue+webpack. After packing, all the js goes into build.js as you know. With Chrome, I can't see any vue file in sources window. So I can't debug js line by line.

Could I debug js line by line or set breaking points with this tool? Or any other ways?

I have a data object inside a component. the data is returned by a function as suggested in the exemple here:
http://vuejs.org/guide/components.html#Component_Option_Caveats

Issue:
with vue devtools in live mode, that data value is not properly refreshed when the value changes.

Workaround:
disabling the live mode and hitting refresh after the vale has changed does work.

I started using vue a couple of days ago, I'm liking it alot so far. thanks a lot :)

i don't know what's the problem .. but vuejs doesn't display in tabs and i'm sure the vue.js works fine in my website . sometimes it working and sometimes not .. any explanation about that ?

It seems that autorefresh doesn't work in some cases. Would like to see if there is a solutions, please look at this issue: inca/voie#8

Thanks.

I'm trying vue-devtools for the first time on a simple app and I can't see any new pane in dev tools. Isn't it supposed to be to the right of the properties pane I've got selected here?

Google Chrome 42.0.2311.134 (Official Build) (64-bit)
On Ubuntu 14.04

Vue DevTools doesn't work with vue.min 1.0.18+. It worked for 1.0.16 and 1.0.17.

Awesome job on the improvements but the vuex tab is not showing for me despite having access to it.

Kudos!! The extension is a must while learning Vue atleast. I would like to request you to provide a similar extension for Firefox.

Please! can i expect it?

Update: (17-March-2017)

It is now possible to use (chrome's) vue dev-tools in Firefox.

1. Install Firefox Developer Edition
2. Install Chrome Store Foxified extension
3. Now go to Chrome Web store and search for vue- devtools, you will now see an Add to Firefox option
4. Once you click on Add to Firefox you will get a pop up with different options, choose Save Signed Addon option and save the file to your disk.
5. Now navigate to about:addons in Firefox and click on the gear icon in the top right corner (just before the search field), you will see an option Install Addon from File in the dropdown menu.
6. Click Install Addon from file and choose the file which you downloaded and saved in Step 4.
7. The vue-devtools will get installed in Firefox, restart Firefox and start using vue-devtools in Firefox.

after updating my chrome i found vue devtools appear in address bar but i can't found it in debug window in chrome .. don't know why

Hey, I've noticed a 1px vertical scrollbar in vue-devtools

It's not really an issue, but I see it both on linux and windows!