Chrome浏览器的vue开发插件_vue开发浏览器插件,vue开发浏览器插件资源-CSDN文库

共189个文件

js：77个

vue：58个

png：16个

vue插件

web开发

Chrome浏览器

5星 · 超过95%的资源需积分: 46 133 浏览量 2018-09-27 15:22:56 上传评论收藏 787KB ZIP 举报

Vue.js是一款非常流行的前端JavaScript框架，它以简洁的API、高效的性能和强大的功能深受开发者喜爱。在进行Vue项目开发时，Chrome浏览器的Vue DevTools是一个不可或缺的工具。这个插件专为Vue应用提供深入的调试功能，使得开发者可以更轻松地理解、检查和调试Vue组件及其状态。 Vue DevTools 是由Vue.js官方团队开发的一款浏览器扩展，它可以在Chrome浏览器中直接安装。通过这个插件，开发者可以直接在浏览器的开发者工具面板中查看应用的Vue实例、组件树、属性、方法、生命周期钩子以及计算属性等。这极大地提高了Vue应用的调试效率，尤其在处理复杂的组件结构和状态管理时。 Vue DevTools 的主要功能包括： 1. **组件树**：展示当前Vue应用中的组件层级结构，点击各个组件节点可以查看其对应的属性、数据、方法等信息。 2. **状态检查**：实时显示组件的状态，包括props、data、computed属性以及methods中的函数，可直接修改数据观察变化。 3. **生命周期调试**：在组件的生命周期钩子处设置断点，方便查看执行流程。 4. **Vue实例检查**：查看应用的根Vue实例以及所有创建的Vue实例。 5. **性能分析**：通过Profiler组件可以分析组件渲染性能，找出可能的性能瓶颈。 6. **Vuex状态管理**：如果项目中使用了Vuex，Vue DevTools还提供了专门的Vuex面板，用于查看和操作store的状态。安装Vue DevTools的方法很简单，可以通过Chrome浏览器的Web Store搜索“Vue.js DevTools”并添加到浏览器。在开发环境中，确保Vue.js已正确引入并启动，打开带有Vue应用的网页，Vue DevTools就会自动检测到并显示在开发者工具的面板中。对于初学者，了解和掌握Vue DevTools的使用是提高开发效率的关键一步。熟练运用Vue DevTools可以帮助开发者快速定位问题，理解组件间的数据流动，优化性能，从而提升整体开发体验。在进行web开发时，尤其是使用Vue.js框架时，这款插件是必备的利器。在压缩包文件"vue-devtools-dev"中，很可能包含了Vue DevTools的开发版本源码或者构建资源。通常，开发者可能需要这些资源来定制插件、进行二次开发或研究其工作原理。不过，对于一般开发者来说，直接从Chrome Web Store安装稳定版本的Vue DevTools已经足够满足日常开发需求。

资源推荐

资源详情

资源评论

收起资源包目录

Chrome浏览器的vue开发插件（189个子文件）

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

vuex-tab.js 8KB

hook.js 7KB

index.js 6KB

data-field-edit.js 6KB

components-tab.js 5KB

vuex.js 5KB

component-data-edit.js 4KB

createConfig.js 4KB

highlighter.js 4KB

module.js 3KB

vuex-edit.js 3KB

perf.js 3KB

devtools-background.js 3KB

background.js 3KB

actions.js 3KB

component-selector.js 3KB

module.js 3KB

en.js 2KB

transfer.js 2KB

module.js 2KB

shared-data.js 2KB

module.js 2KB

toast.js 2KB

router.js 2KB

devtools.js 2KB

router.js 2KB

detector.js 2KB

commands.js 2KB

release.js 2KB

backend.js 2KB

router.js 2KB

index.js 1KB

plugins.js 1KB

index.js 1KB

module.js 1KB

bridge.js 1KB

keyboard.js 1KB

events.js 1KB

env.js 1KB

events-tab.js 1KB

server.js 1KB

devtools.js 1KB

entry-list.js 1KB

backend.js 1008B

devtools.js 1001B

proxy.js 917B

store.js 858B

index.js 836B

app.js 733B

index.js 670B

i18n.js 660B

index.js 639B

responsive.js 587B

hook.js 585B

webpack.config.js 557B

webpack.config.js 537B

storage.js 466B

webpack.config.js 413B

.eslintrc.js 382B

backend.js 314B

global-refs.js 281B

bin.js 265B

.eslintrc.js 181B

suite.js 166B

.eslintrc.js 155B

utils.js 140B

filters.js 112B

hook.js 110B

cache.js 81B

MyClass.js 76B

.eslintrc.js 69B

hook.js 68B

postcss.config.js 66B

resolve.js 34B

package.json 3KB

manifest.json 1KB

package.json 694B

example.json 154B

cypress.json 83B

LICENSE 1KB

共 189 条

# 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)

评论收藏

内容反馈