diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index 22ab81b634..f556e4ae86 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -149,7 +149,9 @@ export class UmbApp extends UmbLitElement {
}
render() {
- return html``;
+ return html`
+
+ `;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
new file mode 100644
index 0000000000..5af1998733
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -0,0 +1,103 @@
+import { UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit-html/directives/style-map';
+import { customElement, property, state } from 'lit/decorators.js';
+
+
+@customElement('umb-debug')
+export class UmbDebug extends LitElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ :host {
+ }
+
+ #debug {
+ display: block;
+ font-family: monospace;
+ /* background:red; */
+
+ position:absolute;
+ bottom:0;
+ left:0;
+ z-index:10000;
+ width:calc(100% - 20px);
+
+ padding:10px;
+ }
+
+ #debug:hover {
+ /* background-color:blue; */
+ }
+
+ .events {
+ background-color:var(--uui-color-danger);
+ color:var(--uui-color-selected-contrast);
+ height:0;
+ transition: height 0.3s ease-out;
+ }
+
+ .events.open {
+ height:200px;
+ padding:10px;
+ }
+
+ h4 {
+ margin:0;
+ }
+
+ `,
+ ];
+
+ @property({reflect: true, type: Boolean})
+ enabled = false;
+
+ @state()
+ private _debugPaneOpen = false;
+
+ private _toggleDebugPane() {
+ this._debugPaneOpen = !this._debugPaneOpen;
+ }
+
+ constructor() {
+ super();
+
+ // Get outer element
+ const app = window.document.querySelector('umb-app');
+
+ console.log('root app', app);
+ app?.addEventListener(umbContextRequestEventType as unknown as UmbContextRequestEventImplementation, (e) => {
+ // Console.log event
+ console.log('Some event', e.type);
+ console.log('Some event thing', e);
+ console.log('Some event thing', e.contextAlias);
+
+ });
+
+ //this.addEventListener('click', (e) => console.log(e.type, e.target.localName));
+ }
+
+ render() {
+
+ if(this.enabled){
+ return html`
+
+ `;
+ }
+
+ return nothing;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-debug': UmbDebug;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index 77c784844f..31fabab8cb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -31,3 +31,5 @@ import './input-document-picker/input-document-picker.element';
import './empty-state/empty-state.element';
import './color-picker/color-picker.element';
+
+import './debug/debug.element';
\ No newline at end of file