• 2E6t6tvl7W
  • JavaScript
  • 3.1MB
  • zip
  • 0
  • 5 积分
  • 0
  • 2022-05-21 19:30
# vue-remote-devtools > This package provides a standalone vue-devtools application, that can be used to debug any Vue app regardless of the environment. Now you can debug your app opened in mobile browser, safari, native script etc. not just desktop chrome or firefox. ### :cd: Installation Install the package globally: ```bash npm install -g @vue/devtools ``` Or locally as project dependency: ```bash npm install --save-dev @vue/devtools ``` ### :rocket: Usage #### Using global package Once you installed the package globally, run: ```bash vue-devtools ``` Then add: ```html <script src="http://localhost:8098"></script> ``` Or if you want to debug your device remotely: ```html <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> ``` To the `<head>` section of your app. **(Don't forget to remove it before deploying to production!)** `<your-local-ip>` usually looks like this: `192.168.x.x`. #### Using dependency package Once you installed the package as project dependency, run: ```bash ./node_modules/.bin/vue-devtools ``` You can also use the global `vue-devtools` to start the app, but you might want to check if the local version matches the global one in this scenario to avoid any incompatibilities. Then import it directly in your app: ```js import devtools from '@vue/devtools' // import Vue from 'vue' ``` > Make sure you import devtools before Vue, otherwise it might not work as expected. And connect to host: ```js if (process.env.NODE_ENV === 'development') { devtools.connect(/* host, port */) } ``` **host** - is an optional argument that tells your application where devtools middleware server is running, if you debug you app on your computer you don't have to set this (the default is `http://localhost`), but if you want to debug your app on mobile devices, you might want to pass your local IP (e.g. ``). **port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL. #### FAQ: **1. How to change port devtools server is running on?** You can change it by setting environment variable before running it: ``` PORT=8000 vue-devtools ``` Then in your app you'll have to set either: ``` window.__VUE_DEVTOOLS_PORT__ = 8000 ``` Or update connect method with new port: ``` devtools.connect(/* host */, 8000) ``` **2. How to remotely inspect page on the server?** For that you can use `ngrok` proxy. You can download it [here]( Once you start vue-devtools run: ``` ngrok http 8098 ``` Then update your host and port accordingly: ``` devtools.connect('', null) ``` Make sure to set port to `null` or `false`, because ngrok host already proxies to proper port that we defined in the first command. **3. How to inspect page served through `HTTPS`?** For that you can also use ngrok, as it automatically proxies https requests to http. Take a look at question number 2 for instructions. **4. How to inspect cordova applications?** Make sure that the page under `http://your-ip:8098` is returning a javascript coode on your device/simulator. If it doesn't - make sure to check your anti-virus or router/firewall settings. If it works - please follow the instructions, and connect to devtools using your IP. For example: ```js import devtools from '@vue/devtools' import Vue from 'vue' // ... function onDeviceReady () { devtools.connect('http://192.168.xx.yy') // use your IP } if (window.location.protocol === 'file:') { document.addEventListener('deviceready', onDeviceReady, false) } else { onDeviceReady() } ``` This will only work on `development` build of your app. ### :beers: Development 1. Install all dependencies ``` npm install ``` 2. Run: ``` npm run dev ``` This will watch `src` folder and compile files on change 3. Run: ``` npm start ``` This will open electron app with devtools 4. Follow **Usage** section to connect any app to your development version of `vue-remote-devtools` ### :lock: License [MIT](
    • vue.js
    • Vue.js 在纯Python中使用 vue.py提供了Python绑定 。 它使用在浏览器中运行Python。 这是vue.py组件的一个简单示例 from browser import alert from vue import VueComponent class HelloVuePy ( VueComponent ):...
    • Vue.js权威指南
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • Vue.js 教程
      Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简 单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模 型。实际...
    • Vue.js权威指南
      如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
    • Vue.js权威指南》
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • vue.js
      乌苏 npm install npm start 。 波尔多电报公司8080 来源
    • vue.jsvue.min.js
      vue.jsvue.min.jsvue.jsvue.min.jsvue.jsvue.jsvue.min.jsvue.jsvue.min.jsvue.min.jsvue.jsvue.min.j s
    • Vue.js最佳实践示例项目-使用Vue.js + Vue路由器+ Vuex + Vuelidate的最佳实践示例项目-Vue.
      Vue.js股票交易者游戏一个用于学习Vue.js生态系统的简单游戏。 该项目使用以下内容:模块:Vue.js-框架Vue Vue.js股票交易者游戏为学习Vue.js生态系统而创建的简单游戏。 该项目使用以下模块:模块:Vue.js-框架Vue...
    • Web Worker中的Vue.js-Vue.js开发
      这是由Rollup.js捆绑提供的使用WorkerDOM在Web Worker中工作的Vue.js的“ hello world”演示应用程序。 Web Worker中的Vue.js这是Vue.js的“ hello world”演示应用程序,由Rollup.js捆绑使用WorkerDOM在Web Worker...