Add a Graphic Interface for debugging requests

[felipenmoura]

There should be a panel or tool with some UX for debugging the requests.

We already can use the trace method to get the debugging information:

DSW.trace('.*', function(traceData){
    console.log(traceData);
});

All we need is a better way to show the information, and perhaps to define the traced requests.

[renanbastos93]

I want help. You can explain better this issue?
Where I can start?

[felipenmoura]

Nice! :)

Well, I see two ways we can do that, but I'm open for suggestions.
One, is a Console plugin/extension (for chrome and firefox). We could add a new tab to it (like react devtools does).
The other way, would be a regular panel made in html, added to the page with some useful tools.
DSW uses postMessage to communicate between the Service Worker and the client(s), that's how the .trace method works.

By simply listening for .* with trace, we will get all the data from any request as an object.
It's just a matter of grouping them and adding some cool "view" features, like filters, clean, find, etc.

We could enable this div if the user run something like DSW.initDebugConsole() in the browser console.
The only thing here, is that if the page reloads, the first requests will not be logged.
An interesting feature could be to "re-trigger" a given request, like "/".

What do you think?