如何在jsFiddle中使用Vue.js Chrome开发工具？

Question

我正在学习Vue.js，并使用jsFiddle进行实验。Vue.js在jsFiddle中有原生支持。

然而，我无法在jsFiddle中使用Chrome浏览器的vue.js开发工具，因为它无法检测到。小的“V”图标始终处于禁用状态，显示“未检测到vue.js”。

现在的问题是，jsFiddle将结果呈现在HTML iframe中，而开发工具本身不会检查任何iframe中的Vue.js应用程序，例如在这个github问题中提到的那样。

我从来没有成功地逃脱iframe。即使在新窗口中打开框架内容的URL时，生成的HTML页面仍然包含一个iframe。

如何在 jsFiddle 中使用 Vue.js 开发工具？

- Marcel

Answer 1

我的解决方案是使用独立的Vue开发工具和node.js，正如Geoff Baum在他的github评论中所提出的。

只需全局安装Vue开发者工具：

npm install -g @vue/devtools

然后在全局运行它：

vue-devtools

在你的代码编辑器中，找到顶部位置，只需添加所提供的脚本URL即可：

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

这里有一个可工作的 jsFiddle，使用标准示例：https://jsfiddle.net/suterma/zr2vtg84/4/

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

这是它的样子：

- Marcel