reading vue.js variables from the js console

Question

Let's say I had this:

var app = new Vue({
  el: '#app',
  data: {
    message: Math.random()
  }
})

And let's say that I wanted to see what value data.message had been assigned in the JS console. How would I do this?

Superficially it seems like doing console.log(app.data.message) would do the trick but when I try to do that I get a Uncaught TypeError: Cannot read properties of undefined (reading 'message') error. In fact, it turns out that app.data is undefined.

So how can I do this?

Here's a JS fiddle with this code:

https://jsfiddle.net/dfzun3by/4/

That code is based off of https://v2.vuejs.org/v2/guide/?redirect=true#Declarative-Rendering

As a corollary to this question... in some production code that I'm now responsible for we don't have that - we have something more akin to this in a *.vue file:

export default {
  data() {
    return {
      message: Math.random()
    }
  }
}

I tried to do console.log(app) in the JS console of the page that that corresponds to and got a Uncaught ReferenceError: app is not defined error so how could I do the same thing in the production code?

score 2 · Answer 1 · answered Mar 28 '22 at 19:15

2

You can access the root instance from JS console with:

document.getElementById('app').__vue__.message

or

app.$options.data().message

For inspecting vue SFC, it is better to use Vue Devtools.

answered Mar 28 '22 at 19:15

Igor Moraru

7,089
1
12
24

Both of those work on the jsfiddle demo - thanks! On my prod instance `document.getElementById('q-app').__vue__.$options` exists (I'm using Quasar on top of Vue.js) but attempting to call `.data()` after that doesn't work. – neubert Mar 28 '22 at 20:50

score 1 · Answer 2 · answered Mar 28 '22 at 19:10

1

Sounds like the Vue.js Devtools extension might be beneficial for you, it'll allow you to see the values of all variables that are available to the Vue template (so everything in data).

https://devtools.vuejs.org/guide/installation.html

answered Mar 28 '22 at 19:10

Connor Dooley

159
11

I'd love to use devtools. Unfortunately, it is not clear to me how to install it. See https://stackoverflow.com/q/61415909/569976 – neubert Mar 28 '22 at 20:37

score -1 · Answer 3 · answered Mar 28 '22 at 17:31

-1

You can reference that value doing console.log(this.message). If you want to log the value every time it changes, you can create a watcher for the message and include "console.log(this.message)" in there.

  watch: {
   message() {
    console.log(this.message)
   }
  }

answered Mar 28 '22 at 17:31

Eze Kohon

315
2
13

That's not helpful. Let's say I have a bunch of buttons that are conditionally enabled. eg. ` `. If the first button is disabled I don't care about flag3 or flag4. Likewise, if the second button isn't working I don't care about flag1 or flag2. I don't want to log every possible combination of variables under the sun because that is simply waaaaay too much info. – neubert Mar 28 '22 at 17:54
but what's that have to do with your original answer? You're referencing your data property the wrong way. console.log(app.data.message) will always be undefined. You need to call console.log(this.message) – Eze Kohon Mar 28 '22 at 18:11
You mean my original _question_. Anyway, `console.log(this.message)` only works when _this_ is actually defined and it's only ever defined in objects. I think in JS you can add methods to objects after the fact but without knowing Vue internals I wouldn't know how to do that. And maybe it isn't possible to see what a single arbitrary variable is set to in the JS console but if that's the case then maybe that's a reason not to use Vue.js... – neubert Mar 28 '22 at 18:30

reading vue.js variables from the js console

3 Answers3