vue-devtools-5.1.1.zip_vue-devtools-5.1.1资源-CSDN下载

共194个文件

js：81个

vue：58个

png：16个

vue

vue-devtools

1星需积分: 21 24 浏览量 2020-04-23 09:27:41 上传评论 1 收藏 914KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vue-devtools-5.1.1.zip （194个子文件）

.browserslistrc 27B

demo.gif 313KB

.gitignore 121B

.gitignore 21B

.gitkeep 0B

app.html 2KB

vue1-test.html 2KB

index.html 836B

devtools.html 383B

target-electron.html 273B

target.html 265B

disabled.nuxt.html 209B

disabled.html 199B

enabled.nuxt.html 143B

enabled.html 133B

not-found.html 82B

devtools-background.html 78B

index.js 24KB

util.js 17KB

vuex.js 17KB

hook.js 10KB

vuex-tab.js 9KB

index.js 7KB

data-field-edit.js 6KB

clone.js 6KB

components-tab.js 5KB

highlighter.js 4KB

component-data-edit.js 4KB

createConfig.js 4KB

module.js 4KB

vuex-edit.js 3KB

perf.js 3KB

devtools-background.js 3KB

background.js 3KB

module.js 3KB

component-selector.js 3KB

transfer.js 3KB

actions.js 3KB

module.js 3KB

en.js 2KB

bridge.js 2KB

module.js 2KB

toast.js 2KB

shared-data.js 2KB

router.js 2KB

devtools.js 2KB

router.js 2KB

storage.js 2KB

detector.js 2KB

commands.js 2KB

release.js 2KB

index.js 2KB

backend.js 2KB

router.js 2KB

store.js 2KB

plugins.js 1KB

index.js 1KB

module.js 1KB

events-tab.js 1KB

keyboard.js 1KB

events.js 1KB

env.js 1KB

server.js 1KB

devtools.js 1KB

entry-list.js 1KB

backend.js 1008B

devtools.js 1001B

proxy.js 917B

dynamic-module.js 866B

index.js 836B

app.js 733B

index.js 670B

i18n.js 660B

index.js 639B

responsive.js 587B

hook.js 585B

defer.js 572B

webpack.config.js 557B

webpack.config.js 537B

webpack.config.js 413B

.eslintrc.js 401B

backend.js 314B

global-refs.js 281B

bin.js 265B

filters.js 197B

.eslintrc.js 181B

suite.js 166B

.eslintrc.js 155B

utils.js 140B

hook.js 110B

cache.js 81B

MyClass.js 76B

.eslintrc.js 69B

hook.js 68B

postcss.config.js 66B

.eslintrc.js 55B

resolve.js 34B

package.json 3KB

manifest.json 1KB

共 194 条

# 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. `http://192.168.1.12`). **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](https://ngrok.com/). Once you start vue-devtools run: ``` ngrok http 8098 ``` Then update your host and port accordingly: ``` devtools.connect('https://example.ngrok.io', 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](http://opensource.org/licenses/MIT)

评论收藏

内容反馈