search

Starcounter / DevTools

A browser extension that helps you debug Starcounter apps with ease
3 stars 1 forks source link

Turn starcounter-debug-aid into a browser extension #51

Closed warpech closed 6 years ago

warpech commented 7 years ago

Consider turning starcounter-debug-aid into a Dev Tools extension.

  1. Can it be made to work in Chrome, Firefox, Edge and Safari?
  2. Can it be based on some existing React or Vue.js tool?
warpech commented 7 years ago

https://github.com/facebook/react-devtools is quite neat as it works as a real browser extension in Chrome and Firefox (using the DevTools Extensions API). For other browsers (such as Edge, mobile browsers, React Native), it can be used as a React component.

alshakero commented 6 years ago

We decided to make it a regular Chrome extension. As opposed to a devTool extension. Much easier to develop and offers the same benefit.

warpech commented 6 years ago

More explicitly, the identified benefits are:

alshakero commented 6 years ago

This is almost done. I spent good 11 hours on it. There will be two options.

It's a Vue app now that is bundled with its CSS and everything. Super maintainable and you can install any NPM package, require it and use it without hassle to add feaures.

Mihaiii commented 6 years ago

It's a Vue app now that is bundled with its CSS and everything. Super maintainable and you can install any NPM package, require it and use it without hassle to add feaures.

OMG, this is awesome!

alshakero commented 6 years ago

This is done, please test in your favorite browser(s) using these steps:

https://github.com/Starcounter/starcounter-debug-aid/tree/extension#adding-to-browser

Lazy to clone? You can copy this URL

https://github.com/Starcounter/starcounter-debug-aid/tree/extension/build

and paste it here:

http://kinolien.github.io/gitzip/

And you'll get a zip containing the directories of interest.

warpech commented 6 years ago

Amazing icon! :D

I noticed two problems in Chrome:

  1. the red and green arrows on the patch screen are corrupt
  2. the patch content is null for HTTP patches

2017-11-21_21-09-25

alshakero commented 6 years ago

Oh I made a design mistake. I'm killing the app when it's closed. So I can't record patches this way. I'll leave it hidden.

thebrauer commented 6 years ago

Nice! I like that I now can have it as a separate popup!

I have noticed two things however.

  1. The arrows next to the expandable levels in the tree are not visible for me: image

  2. There seems to be some form of keep-alive ping that is sent from the client every minute. That collapses the tree. Video: https://www.screencast.com/t/usoNChaCpYdy

alshakero commented 6 years ago

the patch content is null for HTTP patches

It is indeed null, here is the original:

image

alshakero commented 6 years ago

Should be much better now!

alshakero commented 6 years ago

@thebrauer sorry, I didn't see your comment. The first point is solved. I'll check the second. But can you please clone again anyways? I changed a lot.

thebrauer commented 6 years ago

@alshakero I took the latest version and it looks much better! The collapsing still occurs however. When I navigate or change things in the GUI I understand if the tree has to be reloaded but its quite annoying that it collapses while I'm navigating the tree because of that keep-alive ping (or whatever that empty array is in the patches)

alshakero commented 6 years ago

@thebrauer this is fixed now :)

Mihaiii commented 6 years ago

Nice icon :) Tried it today on Chrome 62.0.3202.94 and I stumbled into this problem (page freezes):

chrext1

Might be only my case, I don't know. I reproduced it with Barcodes app, Content app, KitchenSink app. Haven't tried any other app.

Mihaiii commented 6 years ago

I also found confusing the row.url link on patches' URL column.

Mihaiii commented 6 years ago

Ok, since I started with this: On view-model tab, with tree menu option, keys can be changed, but they should be read only, I think. Also there, undo/redo buttons don't seem to work or I'm doing it wrong.

LE: Oh, wait, it's a feature because I just noticed that I have insert/duplicate/remove options and undo/redo work for them. I don't understand this, considering that all the add patches should come from the server side. Could you please elaborate how to use this as it would make this tool even greater for debugging?

alshakero commented 6 years ago

Thanks a lot Mihaii! You helped me a lot, I fixed all your concerns. The undo was there by mistake.

I'll close this issue for now. Just released 0.0.3, update should reach you in minutes.

warpech commented 6 years ago

Setting as “Finished” because it is: