1469543 - Service worker debugging is much too hard

Status: RESOLVED DUPLICATE of bug 1445185

(DevTools :: about:debugging, enhancement)

Description

[Peter Bengtsson [:peterbe]]

Attachment: Screen Shot 2018-06-19 at 8.40.30 AM.png

It could very well be that I'm not a service worker expert in any way but in my defense, I know it can be dealt with differently because I've tried it in Chrome devtools too. 

* The service worker interface really should be in the Network panel or something. 

* It took me, a seasoned Mozilla web developer some Googling and finding support.mozilla.org articles to find that you have to go to about:debugging. 

* "about:debugging" sounds like a place you do debugging of Firefox itself, not for web development of a site/webapp. 

* The about:debugging page has many flaws. Primarily around usability.

 - The icon on the left is repeated for every site which isn't helpful.

 - The only way to search is by Cmd-F to search inside the page.

 - A more useful thing would be to first only list based on active tabs. This list if full of sites I haven't visited in ages. 

 - The "Stopped" button (on the left) is, I guess, not a button. But it looks like one. 

 - "unregister" is probably the most important function, yet it's little hyperlink and not a button. 

 - There's no information about when the server worker last ran. 

 - I don't know what the "Start" button, on the right, does but it's disabled for every single worker. 

* Ideally, on the Network panel where it lists requests and under the column "Transferred" (where it sometimes says "service worker") I'd like to right-click and unregister.

Comment 1

[Peter Bengtsson [:peterbe]]

Attachment: Screen Shot 2018-06-19 at 8.48.30 AM.png

This request was never actually a network event since it was "cached" in the service worker. Yet the request view, especially the options on the right, gives no insights or options around the fact that the request came from a service worker. 

Would be cool that there could be a tab called "Service Worker" which could give me:

* Size and date of when it was put into the service worker. 
* Ability to unregister the URL (not sure if that's technically possible)

Comment 2

[Peter Bengtsson [:peterbe]]

The other thing I would love to see a list of URLs that are registered in the service worker and their dates and sizes. For all URLs in the current tab.

Comment 3

[Julian Descottes [:jdescottes]]

Thanks for the feedback!

We are currently moving service worker debugging to a panel in the toolbox, called the application panel
https://bugzilla.mozilla.org/show_bug.cgi?id=1445185

It should actually end up being similar to Chrome's so if you're used to that you should be fine.

Some of your comments are already be addressed by our plans for this new panel, I'll go through them one by one.

(In reply to Peter Bengtsson [:peterbe] from comment #0)
> Created attachment 8986154 [details]
> Screen Shot 2018-06-19 at 8.40.30 AM.png
> 
> It could very well be that I'm not a service worker expert in any way but in
> my defense, I know it can be dealt with differently because I've tried it in
> Chrome devtools too. 
> 
> * The service worker interface really should be in the Network panel or
> something. 
> 
> * It took me, a seasoned Mozilla web developer some Googling and finding
> support.mozilla.org articles to find that you have to go to about:debugging. 
> 

Yes discoverability is a big issue, hence moving it to a panel in the toolbox. Also looking into recommanding panels to users based on what is currently used in the website they are viewing.

> * "about:debugging" sounds like a place you do debugging of Firefox itself,
> not for web development of a site/webapp. 
> 

Agreed.

> * The about:debugging page has many flaws. Primarily around usability.
> 

We are also revamping about:debugging to refocus it on remote debugging.

>  - The icon on the left is repeated for every site which isn't helpful.
> 

There are no icons in the new version.

>  - The only way to search is by Cmd-F to search inside the page.
> 

I guess search is mainly an issue because there are too many items and you would like to filter. This shouldn't the case when using the toolbox panel because it will only show workers relevant to the current domain.

>  - A more useful thing would be to first only list based on active tabs.
> This list if full of sites I haven't visited in ages. 
> 

Same comment

>  - The "Stopped" button (on the left) is, I guess, not a button. But it
> looks like one. 
> 

Feel free to give a try to the application panel (devtools.application.enabled in about:config) and let us know if you have an issue with the current UI. We haven't yet finalized the UX for the panel. On a sidenote we plan to bring "stop" as a feature.

>  - "unregister" is probably the most important function, yet it's little
> hyperlink and not a button. 
> 

Unregister is now a button

>  - There's no information about when the server worker last ran. 
> 

In the new panel we are showing when the worker was last updated, we should show when it last started in the next milestone

>  - I don't know what the "Start" button, on the right, does but it's
> disabled for every single worker. 
> 

I guess you are in multi e10s, cf the warning block on top of the page. Service worker debugging is disabled in this case (and this includes starting the worker). Service worker debugging has some limitations on the platform side which explains why we haven't put much love in the UI. This should hopefully be unblocked later this year, enabling us to ship this new application panel.

> * Ideally, on the Network panel where it lists requests and under the column
> "Transferred" (where it sometimes says "service worker") I'd like to
> right-click and unregister.

That could be an interesting feature for the network monitor, mind filing a bug there?

Unless I missed something, are you fine with closing this one as a duplicate of the application panel meta: Bug 1445185?

Comment 4

[Peter Bengtsson [:peterbe]]

Duped it. Thanks!

I've enabled the devtools.application now and it worked! 

It seems a lot of my feedback was towards things that are entirely replaced but I'm still glad I filed it since it might inspire the team to work on finishing the new devtools Application panel :)

Comment 5

[Peter Bengtsson [:peterbe]]

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1470239 to tie in the service worker and Application into the Network panel.