Vue.js Inspector for Mobile Devices
Vue.js Inspector for Mobile Devices
vue-inspector is a basic inspector for Vue.js that works with mobile devices. It could work in a desktop environment, but I do not recommend that; use Vue.js devtools instead.
With vue-inspector is possible to execute JavaScript code directly in your mobile browser and get error messages generated at run-time. Also inspect the data, props, router links, views/components, computed properties, routes, Vuex and more... inside your Vue.js project.
Installing with npm:
npm install --save-dev vue-inspector
Using Yarn:
yarn add --dev vue-inspector
JavaScript:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/vue-inspector.min.js"></script>
CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/vue-inspector.min.css">
Install using npm or Yarn, then add vue-inspector (CSS and JavaScript files) to your project. Last step is adding the
<div id="app">
<!-- add the component to your view -->
<vue-inspector :hide-lines="true"/>
</div>
Make sure vue-inspector is the last component added.
If you're having issues with the installation, please see any of the available demos in this repository. Currently vue-inspector does not support Nuxt, but I'm working on it :)
The following properties are available (all of them are Boolean and optional):
Property | Type | Required | Default value | Description |
---|---|---|---|---|
is-visible | Boolean | false | true | Start visible |
is-minimized | Boolean | false | false | Start minimized |
hide-vuex | Boolean | false | false | Hide Vuex tab from UI |
hide-components | Boolean | false | false | Hide Components tab from UI |
hide-router | Boolean | false | false | Hide Router tab from UI |
hide-lines | Boolean | false | false | Hide separator lines (keeping this option in false improves readability) |
If you hide any of the tabs (Components, Vuex or Router) the console will be shown by default. The console can not be hidden or disabled.
Important: sometimes these screenshots are not updated. Check the demos, so you can see the latest version running ;)
All the demos are available for download from this repository. Clone the repository or download the folder demos. Also, I've uploaded them to a temporary free hosting account which you can access with your mobile device:
webpack users: the property assetsPublicPath (in config/index.js) was changed to '/vue-inspector/demos/webpack[-vuex]/'. Only for build. It's because I'm deploying the demo to a different directory instead server's root.
I have tested this tool only with Android phones and tablets. If you have information about the compatibility with iOS, or/and other mobile browsers, please let me know to update this list. I will appreciate any collaboration with compatibility testing. Currently tested/compatible with:
Copyright (c) 2017-2018, Cali Rojas