cartant/rxjs-spy-devtools

Chrome DevTools for rxjs-spy

rxjs-spy-devtools

This is a WIP Chrome DevTools extension for rxjs-spy.

It's not yet ready to be released on the Chrome Web Store, but if you want to check it out, it's installable as an unpacked Chrome extension. Just follow these steps:

1. Clone the repo:

    git clone https://github.com/cartant/rxjs-spy-devtools.git
    cd rxjs-spy-devtools
   

2. Install extension dependencies (for rxjs-spy devtools)

    cd extension
    yarn install
   

3. Build the panel:

    cd ../panel
    yarn install
    yarn build:p
   

4. Build the extension:

    cd ../extension
    yarn build:p
   

5. Install the extension:

   • In Chrome, navigate to "chrome://extensions".
   • Click the "Load unpacked extension..." button.
   • Navigate to the rxjs-spy-devtools/extension/dist directory and click OK.

6. If you open the DevTools, you should have an "RxJS" entry in the tab panel. (You might have to click the >> button to see it.)

7. If you navigate to a page in which a spy has been created (using at least version 6.0.0 of rxjs-spy), you should see a list of observables (filterable on tag and type) in the "RxJS" panel. The simplest way to do this is to run the following command from within the extension directory:

    yarn harness
   

   You might find that you need to refresh the page after opening to the "RxJS" panel - as I said, it still needs some work.

   The panel's UI isn't indicative of what the released tools will look like - it's pretty basic and is just there to expose/test the logging and pausing functionality, etc.

rxjs-spy-devtools's Issues

extension build error

gives a:

rxjs-spy-devtools\extension\source\background.ts(86,12)
TS2345: Argument of type '(port: Port) => boolean | undefined' is not assignable to parameter of type '(value: Port, index: number) => boolean'.
Type 'boolean | undefined' is not assignable to type 'boolean'.
Type 'undefined' is not assignable to type 'boolean'.

How to contribute?

Hey @cartant,

I would love to see something like this for RxJS, since we've embraced RxJS pretty extensively at Ardoq and are using it for state management, side effects, etc.

I was wondering if you have any ideas on how I could start contributing to the project? Perhaps even jumping on a call might be the best :-)

Also, I haven't actually been able to build the extension from the master branch.

On step 4 I get:

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(86,12)
      TS2345: Argument of type '(port: Port) => boolean | undefined' is not assignable to parameter of type '(value: Port, index: number) => boolean'.
  Type 'boolean | undefined' is not assignable to type 'boolean'.
    Type 'undefined' is not assignable to type 'boolean'.

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(87,30)
      TS2339: Property 'sender' does not exist on type '{}'.

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(91,13)
      TS2322: Type '{}' is not assignable to type 'Port'.

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(93,34)
      TS2322: Type '{}' is not assignable to type 'Port'.

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(96,42)
      TS2345: Argument of type '{}' is not assignable to parameter of type 'Port'.
  Property 'postMessage' is missing in type '{}'.

ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts
[tsl] ERROR in /Users/anton164/git/rxjs-spy-devtools/extension/source/background.ts(107,24)
      TS2339: Property 'postType' does not exist on type '{}'.

Upgrade to latest Angular

Upgrade the panel project, fix up its directory structure, and re-arrange/simplify the actions, etc.

Installing panel requires @devtools first

I tried to clone the repo and build the "panel" module and got a bunch of the following errors:

src/app/root/spy/service/service.actions.ts(2,70): error TS2307: Cannot find module '@devtools/interfaces'

I noticed in tsconfig.json that @devtools refers to parts of the "extension" module and therefore built it as well. Building failed due to a missing file from "panel", but after that I could build the "panel". I suppose that yarn install needs to be executed for the "panel" before "extension" can be built.

OS: Windows 10 64bit