https://github.com/calirojas506/vue-inspector
Vue.js Inspector for Mobile Devices
https://github.com/calirojas506/vue-inspector
awesome-vue vue-inspector vue-router vuejs vuejs-components vuex
Last synced: 7 months ago
JSON representation
Vue.js Inspector for Mobile Devices
- Host: GitHub
- URL: https://github.com/calirojas506/vue-inspector
- Owner: calirojas506
- License: mit
- Created: 2017-12-12T09:04:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-27T14:50:49.000Z (almost 8 years ago)
- Last Synced: 2025-04-20T17:42:01.806Z (8 months ago)
- Topics: awesome-vue, vue-inspector, vue-router, vuejs, vuejs-components, vuex
- Language: JavaScript
- Size: 5.51 MB
- Stars: 263
- Watchers: 8
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-inspector - Vue.js Inspector for Mobile Devices ` 📝 3 years ago` (Dev Tools [🔝](#readme))
- awesome-vue-zh - 视觉检查员 - Vue.js移动设备检查员 (叫研发工具组 / 检查)
- awesome-vue - vue-inspector - Vue.js Inspector for Mobile Devices (Components & Libraries / Dev Tools)
- awesome-vue - vue-inspector ★252 - Vue.js Inspector for Mobile Devices (Dev Tools / Inspect)
- awesome-vue - vue-inspector - Vue.js Inspector for Mobile Devices (Dev Tools / Inspect)
README
# vue-inspector 0.4.3
Vue.js Inspector for Mobile Devices
## What is vue-inspector?
[](https://npmjs.org/package/vue-inspector)
**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.
## Features
- Works with Vue.js 2
- Reactive _(of course)_
- Routes, data, Vuex and computed properties inspection
- Integrated JavaScript _(basic)_ console for code execution and messages/errors logging
- Navigation inside components and their children _(with inspection)_
- Responsive and simple UI
- Supports vue-router
## Installing vue-inspector via Yarn or npm
Installing with npm:
```shell
npm install --save-dev vue-inspector
```
[](https://npmjs.org/package/vue-inspector)
Using Yarn:
```shell
yarn add --dev vue-inspector
```
## Using vue-inspector from jsDelivr CDN
JavaScript:
```html
```
CSS:
```html
```
## How to use vue-inspector?
Install using npm or Yarn, then add **vue-inspector** _(CSS and JavaScript files)_ to your project. Last step is adding the **<vue-inspector/>** component inside your app wrapper _(**el**)_.
```html
```
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 :)
## Properties
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.
## Screenshots
**Important:** sometimes these screenshots are not updated. Check the demos, so you can see the latest version running ;)
## Demos
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:
- [Simple demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/simple)
- [CodePen demo](https://codepen.io/calirojas506/full/baqLxb/)
- [vue-router demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/vue-router)
- [webpack demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/webpack)
- [webpack + Vuex demo](http://calirojas1.000webhostapp.com/vue-inspector/demos/webpack-vuex)
**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.
## Compatibility
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:
- Firefox for Android
- Google Chrome for Android
- Works in desktop
## Pending / In Progress
- Events logging
- Firebase bindings
- Support for Nuxt _(In progress)_
## Changelog
- **January 27th, 2018**
- Improved support for Date objects
- Version 0.4.3 released _(npm)_
- **December 26th, 2017**
- Improved variable type detection
- **Console** tab removed _(now appears at the bottom)_
- Basic support for Vuex added _(new tab Vuex)_
- vue-router support improved _(new tab Router)_
- JavaScript console improvements
- UI changes and performance improvements
- Recursive components
- New props added: hide-lines, hide-vuex, hide-components, hide-router
- Optional separator lines to improve readability in devices with small screens _(prop **hide-lines**, by default = false)_
- New webpack demo using Vuex
- npm package released, version 0.4.0
- jsDelivr CDN added
- Fixed small issue with "lastUpdate" property (patched to 0.4.1 / 0.4.2)
- Released version 0.4.2
- **December 22th, 2017**
- Improved support for vue-router
- Fixed issue with Vuex
- Version 0.3.1 released
- npm package updated to 0.3.1 _(please, update your vue-inspector version)_
- Screenshots updated to 0.3.1
- **December 21th, 2017**
- UI updates
- Component rewrite
- Component prop **is-expanded** removed
- Project's structure changed
- New demos added
- Version 0.3.0 released :)
- **December 19th, 2017**
- New demo added for webpack integration.
- **December 16th, 2017**
- **vue-inspector**, beta 0.2 released.
- Added support for vue-router.
- New demo created/added, using vue-router to demonstrate how the integration works.
- Tested in Mozilla Firefox for Android. It works :)
- **December 14th, 2017**
- **vue-inspector**, beta 0.1 released.
## Stay In Touch
- [Twitter](https://twitter.com/calirojas506)
- [Facebook](https://www.facebook.com/calirojas506)
- [LinkedIn](https://www.linkedin.com/in/cali-rojas-17403334/)
- [YouTube](https://youtube.com/calirojas506)
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2017-2018, Cali Rojas