Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/MiCottOn/DejaVue

Visualization and debugging tool built for Vue.js
https://github.com/MiCottOn/DejaVue

chrome-devtools javascript visualization vue vuejs

Last synced: 2 months ago
JSON representation

Visualization and debugging tool built for Vue.js

Lists

README 

        
# DejaVue - Vue.js visualization and stress testing 



(Only works with Vue 2.0!)






## Installation

Click here to download the extension!



## Manual Installation 



Make sure you are using Node 6+ and NPM 3+

1. Clone this repo


2. npm run build


3. Open Chrome extension page


4. Check "developer mode"


5. Click "load unpacked extension", and choose the entire folder.



## Building over it

1. Clone this repo


2. npm install


3. npm run dev



## Features - all work with and without a state management library (e.g. Vuex)

1. Application Structure Visualization - Interactive tree 


2. Component Inspection - view props, variables and slots


3. Diff Engine - As you test see which components are being updated and what those changes are


4. Time Travel - Move backwards and forwards through your state changes and see both the tree and your application update


5. Component Highlighting - Hover over a tree leaf to highlight the component on your app



## Screenshots











## Everything else

Want to help contribute? Fork the repo and have at it!


Why and how we decided to build this


Next on the pipeline: Squashing bugs and implementing stress testing



Authors:

Scott,

Mike, and 

Jon