Как использовать Vue. js Chrome devtools с jsFiddle?

Question

Я учусь Vue. js и играю с этим, используя jsFiddle . Vue. js изначально поддерживается jsFiddle.

Однако я не могу использовать Chrome Browser's vue. js dev-tools с jsFiddle, так как это не обнаружение этого. Маленький значок «V» всегда остается отключенным, говоря: «vue. js не обнаружен».

Теперь проблема в том, что jsFiddle отображает результат в HTML iframe, и dev-tools as is не проверяет iframe для Vue. js приложений, как, например, упомянуто в этой проблеме github .

Мне так и не удалось сбежать iframe. Даже при открытии URL-адреса содержимого в рамке в новом окне результирующая страница HTML снова содержит iframe.

Как использовать инструменты разработки Vue. js с jsFiddle.

Answer 1

Мое решение этого заключается в использовании автономных инструментов разработчика с node.js, как предложено Джеффом Баумом в его комментарии к 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>

Вот как это выглядит: