vue-devtools-master.zip资源-CSDN文库

共145个文件

js：67个

vue：27个

png：16个

谷歌vue插件

谷歌插件

需积分: 50 158 浏览量 2020-04-18 23:14:16 上传评论收藏 743KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

vue-devtools-master.zip （145个子文件）

demo.gif 313KB

.gitignore 106B

.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 19KB

util.js 14KB

vuex.tab.js 7KB

data-field-edit.js 5KB

index.js 5KB

components-tab.js 4KB

highlighter.js 3KB

module.js 3KB

devtools-background.js 3KB

background.js 3KB

component-selector.js 3KB

transfer.js 2KB

en.js 2KB

createConfig.js 2KB

module.js 2KB

hook.js 2KB

module.js 2KB

shared-data.js 2KB

toast.js 2KB

devtools.js 2KB

actions.js 2KB

detector.js 2KB

commands.js 2KB

release.js 1KB

backend.js 1KB

keyboard.js 1KB

vuex.js 1KB

events.js 1KB

plugins.js 1KB

index.js 1KB

events.tab.js 1KB

index.js 1KB

server.js 1KB

env.js 1KB

devtools.js 1KB

backend.js 1008B

devtools.js 1001B

bridge.js 960B

proxy.js 917B

index.js 836B

app.js 733B

store.js 672B

index.js 670B

router.js 663B

i18n.js 660B

responsive.js 587B

hook.js 585B

webpack.config.js 557B

webpack.config.js 537B

storage.js 466B

webpack.config.js 413B

.eslintrc.js 382B

router.js 332B

backend.js 314B

entry-list.js 302B

router.js 284B

global-refs.js 281B

bin.js 265B

index.js 202B

.eslintrc.js 181B

suite.js 166B

.eslintrc.js 155B

utils.js 140B

MyClass.js 76B

.eslintrc.js 69B

hook.js 68B

package.json 3KB

manifest.json 1KB

package.json 651B

example.json 154B

cypress.json 83B

LICENSE 1KB

yarn.lock 206KB

yarn.lock 92KB

README.md 4KB

README.md 3KB

open-in-editor.md 1KB

ISSUE_TEMPLATE.md 212B

.npmignore 17B

screenshot-shadow.png 56KB

screenshot.png 53KB

logo.png 7KB

128.png 5KB

共 145 条

# 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. `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('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. ### :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)

评论收藏

内容反馈