Log console on screen

Debuggr.ts

class Debuggr {
	private root: HTMLElement
	private container: HTMLElement
	private clearArea: HTMLElement

	constructor() {
		const root = document.createElement('div')
		root.style.position = 'absolute'
		root.style.top = '0px'
		root.style.left = '0px'
		root.style.padding = '4px'
		root.style.color = '#ff0000'
		root.style.fontSize = '12px'
		root.style.lineHeight = '14px'
		root.style.fontWeight = '700'
		root.style.pointerEvents = 'none'
		root.style.zIndex = '100'
		root.style.overflow = 'hidden'
		this.root = root

		this.container = document.createElement('div')

		const clearArea = document.createElement('div')
		clearArea.style.position = 'fixed'
		clearArea.style.display = 'flex'
		clearArea.style.justifyContent = 'center'
		clearArea.style.alignItems = 'center'
		clearArea.style.top = '0px'
		clearArea.style.right = '0px'
		clearArea.style.width = '20px'
		clearArea.style.height = '20px'
		clearArea.style.pointerEvents = 'auto'
		clearArea.style.cursor = 'pointer'
		clearArea.style.fontSize = '16px'
		clearArea.innerHTML = '🗑️'
		clearArea.addEventListener('click', this.clear.bind(this))
		this.clearArea = clearArea

		this.root.append(this.clearArea, this.container)
		document.body.append(this.root)
	}

	public log(content: any) {
		const date = new Date()
		const hours = String(date.getHours()).padStart(2, '0')
		const minutes = String(date.getMinutes()).padStart(2, '0')
		const seconds = String(date.getSeconds()).padStart(2, '0')
		const milliseconds = date.getMilliseconds()
		const time = `[${hours}:${minutes}:${seconds}:${milliseconds}] `

		const elem = document.createElement('div')
		elem.style.marginBottom = '4px'
		elem.style.backgroundColor = '#00000040'
		elem.style.padding = '1px 4px'
		elem.style.borderRadius = '2px'

		elem.append(time)
		elem.append(content)

		this.container.prepend(elem)
	}

	public stringify(content: any) {
		this.log(JSON.stringify(content))
	}

	public clear() {
		this.container.innerHTML = ''
	}
}

const debuggr = new Debuggr()
;(window as any).debuggr = debuggr

const originalError = console.error
console.error = function (...args) {
	debuggr.log('[console error]: ' + args)
	originalError(...args)
}

const originalWarn = console.warn
console.warn = function (...args) {
	debuggr.log('[console warn]: ' + args)
	originalWarn(...args)
}

// Try it!
console.error('Error!')
console.warn('Deprecated!')