Display MQTT debug info

[emontnemery]

Breaking change

Proposed change

Display MQTT debug info

Screenshots:

Showing recent messages, maybe timestamps should be added:

MQTT Discovery payload and subsribed topic payload can be displayed as JSON:

or as YAML:

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: Add MQTT debug info core#33461
• 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]

Use a WeakMap instead of an Array

[bramkragten]

Suggested change

	(_, i) => html`
	(message) => html`

[bramkragten]

Suggested change

	${this._renderSingleMessage(i)}
	${this._renderSingleMessage(message)}

[bramkragten]

Suggested change

	private _renderSingleMessage(i: number): TemplateResult {
	private _renderSingleMessage(message): TemplateResult {

[bramkragten]

Suggested change

	const topic = this.messages[i].topic;
	const topic = message.topic;

[bramkragten]

Suggested change

	Payload: ${this._renderSinglePayload(i)}
	Payload: ${this._renderSinglePayload(message)}

[bramkragten]

Suggested change

	: this._renderSinglePayload(i);
	: this._renderSinglePayload(message);

[bramkragten]

Suggested change

	private _renderSinglePayload(i: number): TemplateResult {
	private _renderSinglePayload(message): TemplateResult {

[bramkragten]

Move this below the check for this.showDeserialized

[bramkragten]

let json;
if (!this._payloadsJson.has(message)) {
	json = this._tryParseJson(message.payload);
	this._payloadsJson.set(message, json);
} else {
	json = this._payloadsJson.get(message);
}