Debug option to enable logging server calls

[karwosts]

Proposed change

In another PR we mused about a "debug" section of developer tools. I use heavily the logger which reports calls between the frontend and the HA server in debugging. If possible, thought it would be nice to have an option to enable this in release mode, and it seemed like a fit for this section. There are times when it could help debug issues.

Note I'm not actually confident if this works at all, perhaps something about the way the release is compiled will make this impossible, though it seems to work as intended when I try it in the dev build. So just wanted to get some feedback on if this seems possible.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

This should just work! Wonder if we use log it in the console or make it visible on the screen, but for a first version, this seems perfect.

This will btw not log everything, it only logs the things that are called through the hass object, we also use connection directly to send messages, like subscriptions.

[karwosts]

I like the console because it has a lot more features than just displaying a log. E.g. if you receive a response with 1000 entries in it, you can copy it as a javascript object, and run things like filter and map commands on it right in the console.

This will btw not log everything, it only logs the things that are called through the hass object, we also use connection directly to send messages, like subscriptions.

Yeah I noticed that not all data is captured this way (even in DEV mode), I'd like to log those type of connections someday if possible too.

[bramkragten]

Had a quick discussion with the design team about the debug panel in the dev tools, and we think placing it in an overflow menu makes the most sense, as it doesn't matches the other panels in dev tools. They can be used by the average user and this is really for developers.

[bramkragten]

I think we should store this in localStorage, now you will never be able to catch things when the page is refreshed?

[karwosts]

Does including this in ha-pref-storage take care of that? I thought it was working when I tested it.

[karwosts]

It looks like I'm getting everything I expect to see when hitting refresh with this toggle enabled (and I did remove the DEV part of the equation just to test and be sure).

[bramkragten]

Oh right, missed that 🙈 yeah pref storage stores that part in local storage!

[karwosts]

Had a quick discussion with the design team about the debug panel in the dev tools, and we think placing it in an overflow menu makes the most sense, as it doesn't matches the other panels in dev tools. They can be used by the average user and this is really for developers.

You mean something like this?

[bramkragten]

You mean something like this?

Yes, but in the top bar, so on the same height as Developer tools

[karwosts]

Moved navigation to overflow.