Updated README and added screenshot

README.md

@@ -1,22 +1,42 @@
-## Setup
-1. Install the chrome extension
-2. Set up [rxjs-spy-devtools-plugin](https://github.com/ardoq/rxjs-devtools/tree/master/packages/rxjs-spy-devtools-plugin) in your app and tag the streams that you wish to inspect in the devtools.
+## RxJS DevTools for debugging streams
+This extension allows you to debug your RxJS stream emissions by hooking into the [rxjs-spy](https://github.com/cartant/rxjs-spy) debugging library.
 
-## Structure
+The project was inspired by [rxjs-spy-devtools](https://github.com/cartant/rxjs-spy-devtools).
 
-This repo is split into three packages:
-- **[packages/rxjs-spy-devtools-plugin](https://github.com/ardoq/rxjs-devtools/tree/master/packages/rxjs-spy-devtools-plugin)**: plugin for [rxjs-spy](https://github.com/cartant/rxjs-spy)
+![DevTools screenshot](docs/rxjs-devtools.png)
+
+## How to use in your app
+1. [Install the chrome extension](#installing-the-extension-in-developer-mode)
+2. Set up [rxjs-spy-devtools-plugin](https://github.com/ardoq/rxjs-devtools/tree/master/packages/rxjs-spy-devtools-plugin) in your app and [tag the streams](https://github.com/cartant/rxjs-spy#core-concepts) that you wish to inspect in the devtools.
+
+## Structure & Philosophy
+The repo is split into three packages:
+- **[packages/rxjs-spy-devtools-plugin](packages/rxjs-spy-devtools-plugin/README.md)**: plugin for [rxjs-spy](https://github.com/cartant/rxjs-spy) that sends info about stream emissions to the dev tools extension
 - **packages/extension**: chrome extension for the devtools
-- **packages/shared**: shared types, interfaces and utils between all the packages
+- **packages/shared**: shared types, interfaces and utils for communication between the rxjs-spy plugin and the extension
+
+Although the extension currently depends on [rxjs-spy-devtools-plugin](packages/rxjs-spy-devtools-plugin/README.md) to receive info about stream emissions. In theory this repository can be extended with another plugin that sends info about stream emissions in a different manner.
+
+## Installing the extension in developer mode
+1. `git clone` this repository
+2. `cd packages/extension`
+3. `yarn install ` to install the dependencies.
+4. `yarn build`
+5. Load the extension in Chrome:
+   1. Access `chrome://extensions/`
+   2. Check `Developer mode`
+   3. Click on `Load unpacked extension`
+   4. Select the `packages/extension/build` folder
+6. You should now see `RxJS Devtools` as a tab in dev tools.
 
-## Develop the extension
-To run and develop the extension locally, inside `packages/extension`:
-1. Run `yarn install` to install the dependencies.
-2. Run `yarn start`
-3. Load the extension in Chrome:
+## Developing the extension
+1. cd `packages/extension`
+2. Run `yarn install` to install the dependencies.
+3. Run `yarn start`
+4. Load the extension in Chrome:
    1. Access `chrome://extensions/`
    2. Check `Developer mode`
    3. Click on `Load unpacked extension`
    4. Select the `packages/extension/build` folder.
-4. Happy hacking!
+5. Happy hacking!
 

packages/extension/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rxjs-devtools-extension",
   "version": "0.0.1",
-  "description": "RxJS Devtools Extension",
+  "description": "RxJS DevTools extension for debugging streams",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/rxjs-spy-devtools-plugin/README.md

@@ -2,10 +2,9 @@
 
 ## Usage
 
-1. Install in your project:
-`yarn add rxjs-spy-devtools-plugin`
+1. Install in your project: `yarn add rxjs-spy-devtools-plugin`
 
-2. Add the plugin to your spy
+2. Add the plugin to your: `rxjs-spy`
 
 ```typescript
 import DevToolsPlugin from 'rxjs-spy-devtools-plugin';
@@ -16,6 +15,7 @@ const devtoolsPlugin = new DevToolsPlugin(spy, {
 });
 spy.plug(devtoolsPlugin);
 
+// We must teardown the spy if we're hot-reloading:
 if (module.hot) {
   if (module.hot) {
     module.hot.dispose(() => {
@@ -25,7 +25,9 @@ if (module.hot) {
 }
 ```
 
-3. Load the [chrome extension](https://github.com/ardoq/rxjs-devtools)
+3. [Tag the streams](https://github.com/cartant/rxjs-spy#core-concepts) that you wish to inspect in devtools.
+
+4. Load the [chrome extension](../../README.md#installing-the-extension-in-developer-mode)
 
 
 ## Develop

packages/rxjs-spy-devtools-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rxjs-spy-devtools-plugin",
   "version": "0.0.2",
-  "description": "Devtools plugin for rxjs-spy",
+  "description": "RxJS DevTools plugin for rxjs-spy",
   "author": "Anton Abilov <[email protected]>",
   "homepage": "https://github.com/ardoq/rxjs-devtools#readme",
   "license": "MIT",
@@ -41,4 +41,4 @@
   "dependencies": {
     "rxjs-spy": "^7.5.1"
   }
-}
+}