web-dev-qa-db-ja.com

Safari用のVue-devtools拡張

私のVueプロパティの1つ(少なくとも))をFirefoxとSafariがどのように処理しているのかが一致していないようです。

8
capncanuck

現在、vuejs用の公式のSafari拡張機能はありません。ただし、サファリでvue-devtoolsを使用するための回避策に従うことができます。

Vue-devtoolsのクローン

git clone https://github.com/vuejs/vue-devtools

ライブラリをインストールしてビルドする

 npm install   
 npm run build:safari

次に、Safariブラウザを開いて(メニューバーのメニュー)に移動します。

preferences -> Advanced -> Show Developer

Open Developer->拡張ビルダーを表示

左下のプラスボタンをクリックし、[拡張機能の追加...]を選択します。

選択する shells/safari/Vue.js devtools.safariextension

ウェブサイトアクセスですべて選択->アクセスレベル

安全なウェブページを含めるをチェック

右上の[インストール]をクリックします

Githubリンク


Chrome=ユーザーで、インスペクタに「Vue」タブが表示されるのに慣れている場合、Safariにそのようなタブは表示されません。このビューは、次の拡張ボタンをクリックすると表示されますURLバーに: location of vue devtools inspector in Safari

5
samayo

現在、vue-devtoolsバージョンelectronが存在します。これはすべてのプラットフォームで機能します。

npm install -g @vue/devtools

パッケージをグローバルにインストールしたら、次を実行:

vue-devtools

これをアプリのヘッドに追加します

<script>
  window.__VUE_DEVTOOLS_Host__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>

safariで開発アプリを開きます

localhost:3000

IPHONE:localhostではなくipを使用し、さらにiphoneでアクティブなデバッグオプションを使用できます。これをiphone safariで使用できます! Macでデバッグします。

詳細と詳細

https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

13
Pablote