How to use the Vue.js Chrome devtools with jsFiddle?

Question

I am learning Vue.js and am playing around with it using jsFiddle. Vue.js is natively supported by jsFiddle.

However, I can not use the Chrome Browser's vue.js dev-tools with jsFiddle, as it's not detecting it. The little "V"-icon always stays disabled, saying "vue.js not detected".

Now, the problem is, that jsFiddle renders the result in an HTML iframe, and dev-tools as is does not check any iframe for Vue.js apps, as for example, mentioned in this github issue.

I never managed to escape the iframe. Even when opening the framed content's URL in a new window, the resulting HTML page again contains an iframe.

How to use the Vue.js dev-tools with jsFiddle?

2 revs · Accepted Answer · 2020-01-20 12:32:17Z

7

My solution to this is using the standalone dev-tools with node.js, as proposed by Geoff Baum in his comment on github.

Just install Vue Developer Tools globally:

npm install -g @vue/devtools

Then run it globally:

vue-devtools

In your fiddle, right on top, just add the proposed script URL:

<script src="http://localhost:8098"></script>

Here's a working jsFiddle, using the standard example: https://jsfiddle.net/suterma/zr2vtg84/4/

<script src="http://localhost:8098"></script>
<div id="app">
  <h2>Todos:</h2>
....
</div>

Here's how it looks:

edited Jan 20, 2020 at 12:32

community wiki

2 revs
Marcel

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use the Vue.js Chrome devtools with jsFiddle?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related