如何将 Vue.js Chrome 开发工具与 jsFiddle 一起使用？

【问题标题】：How to use the Vue.js Chrome devtools with jsFiddle?如何将 Vue.js Chrome 开发工具与 jsFiddle 一起使用？
【发布时间】：2020-01-20 12:17:38
【问题描述】：

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

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

现在，问题是，jsFiddle 以 HTML iframe 呈现结果，并且 dev-tools 不会检查任何 iframe 的 Vue.js 应用程序，例如，在此 github issue 中提到.

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

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

【问题讨论】：

【解决方案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>

它的外观如下：

【讨论】：