vuejs / devtools Goto Github PK
View Code? Open in Web Editor NEW⚙️ Browser devtools extension for debugging Vue.js applications.
Home Page: https://devtools.vuejs.org
License: MIT License
⚙️ Browser devtools extension for debugging Vue.js applications.
Home Page: https://devtools.vuejs.org
License: MIT License
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 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'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 state
s 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
Vue DevTools doesn't work with vue.min 1.0.18+. It worked for 1.0.16 and 1.0.17.
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.
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.
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?
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.
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
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?
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'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 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.
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?
It is now possible to use (chrome's) vue dev-tools in Firefox.
Add to Firefox
you will get a pop up with different options, choose Save Signed Addon option and save the file to your disk.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.Install Addon from file
and choose the file which you downloaded and saved in Step 4.vue-devtools
will get installed in Firefox, restart Firefox and start using vue-devtools in Firefox.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.
[email protected] build /home/user/Cool/vue-devtools
> cd shells/chrome && cross-env NODE_ENV=production webpack --progress --hide-modules
10% 0/1 build modules/usr/local/lib/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
throw e;
^
Error: Cannot find module '../../modules/es6.object.keys'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/home/user/Cool/vue-devtools/node_modules/babel-runtime/node_modules/core-js/library/fn/object/keys.js:1:63)
...
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.
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.
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.
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
Awesome job on the improvements but the vuex
tab is not showing for me despite having access to it.
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 ?
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.
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
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?
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.
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.
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?
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.
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
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
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.
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"
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?
Is it possible to have a version for for firefox?
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.
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 :)
Safari is much faster than chrome, it could be great to have this extension :)
Thanks !
if (rect.top === 0) debugger;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.