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

Question

我正在学习Vue.js，并正在使用jsFiddle对其进行操作。 jsFiddle原生支持Vue.js。

但是，我无法将Chrome Browser's vue.js dev-tools与jsFiddle一起使用，因为它没有检测到它。小小的“ V”图标始终保持禁用状态，说“未检测到vue.js”。

[现在，问题在于，jsFiddle将结果呈现为HTML iframe，而dev-tools本身不检查Vue.js应用程序的任何iframe。

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

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

Answer 1

我对此的解决方法是使用standalone dev-tools with node.js，如Geoff Baum在他的comment on 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>

外观如下：