DejaVue - Vue.js visualization and stress testing

<h4>(Only works with Vue 2.0!)</h4> <img src="http://i.makeagif.com/media/2-11-2017/Qal6HH.gif" width="600px"/>

Installation

<h3><a href="https://chrome.google.com/webstore/detail/dejavue/jpigngmphmclcmikmcbcfplgnhlnefbp?hl=en">Click here to download the extension!</a></h3>

Manual Installation

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

<p>1. Clone this repo</p> <p>2. <code>npm run build</code></p> <p>3. Open Chrome extension page</p> <p>4. Check "developer mode"</p> <p>5. Click "load unpacked extension", and choose the entire folder.</p>

Building over it

<p>1. Clone this repo</p> <p>2. <code>npm install</code></p> <p>3. <code>npm run dev</code></p>

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

<p>1. Application Structure Visualization - Interactive tree </p> <p>2. Component Inspection - view props, variables and slots</p> <p>3. Diff Engine - As you test see which components are being updated and what those changes are</p> <p>4. Time Travel - Move backwards and forwards through your state changes and see both the tree and your application update</p> <p>5. Component Highlighting - Hover over a tree leaf to highlight the component on your app</p>

Screenshots

<img src="http://i.imgur.com/bDkokdE.png" width="600px" /> <img src="http://i.imgur.com/pbBJ7ir.png" width="600px" /> <img src="http://i.imgur.com/0arU5qP.png" width="600px" /> <img src="http://i.makeagif.com/media/2-11-2017/9388A-.gif" width="600px" />

Everything else

<p>Want to help contribute? Fork the repo and have at it!</p> <p><a href="https://medium.com/@jonajumba/why-were-building-dejavue-js-80e037bf15e3#.tygt4by9o">Why and how we decided to build this</a></p> <p>Next on the pipeline: Squashing bugs and implementing stress testing</p>

Authors: <a href="https://github.com/sschwartz0">Scott</a>, <a href="https://github.com/madebymtr">Mike</a>, and <a href="https://github.com/kimhjona">Jon</a>

<a href="http://imgur.com/SkifFa4"><img src="http://i.imgur.com/SkifFa4.png" title="source: imgur.com" /></a>