如何将 Vue.js Chrome devtools 与 jsFiddle 一起使用？

Question

我正在学习Vue.js并且正在使用jsFiddle玩它。jsFiddle 原生支持 Vue.js。

但是，我无法使用Chrome 浏览器的 vue.js dev-tools与 jsFiddle 一起使用，因为它没有检测到它。小“V”图标始终处于禁用状态，表示“未检测到 vue.js”。

现在，问题是 jsFiddle 将结果呈现在 HTML 中iframe，而 dev-tools 不检查任何iframeVue.js 应用程序，例如，在此github issue 中。

我从未设法逃脱iframe. 即使在新窗口中打开框架内容的 URL，生成的 HTML 页面也会再次包含iframe.

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

Answer 1

我对此的解决方案是使用带有 node.js的独立开发工具，正如Geoff Baum在他对 github 的评论中提出的那样。

只需全局安装 Vue Developer Tools：

npm install -g @vue/devtools

然后全局运行：

vue-devtools

在您的小提琴中，在最上方，只需添加建议的脚本 URL：

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

这是一个有效的 jsFiddle，使用标准示例：https ://jsfiddle.net/sutema/zr2vtg84/4/

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

这是它的外观：