Debugging

Kelp does not minify its CSS or JavaScript.

This makes debugging easier, as the code that you can see in your browser’s dev tools inspector is the same code you can find in the source files.

Kelp also emits a kelp-debug event whenever their are errors in a web component.

To “activate” debug mode, add an event listener on the document for kelp-debug events. The event.target is the affected element, and the event.detail property is the error message.

document.addEventListener('kelp-debug', (event) => {
	console.log('KELP DEBUG', {
		element: event.target,
		message: event.detail
	});
});

While this example logs errors into the console, you can also use this setup to send error messages to an API and log issues on a live production site if you wanted.