Debug Panel
Boilerplate container for debugging purposes. A handy and non intrusive (shadow root) panel, resizable, foldable and easilly configurable with custom tabs & action shortcut icons.
import {debugPanel} from './node_modules/debug-panel/src/debugger.js'; // load custom styles debugPanel.loadStyles( 'my-custom-style.css' ); //Register new tabs let tabId = debugPanel.Register.tab( 'File Info', (view)=>{ view.innerHTML='test' }) // Or register new actions (shirtcut icons)... debugPanel.Register.action( 'Alert', '!' , ()=>{ alert('test') }) // add native features, like a dom selector tab... debugPanel.addFeature.tab.DOMSelector(); // or a shortcut icon lo load files debugPanel.addFeature.action.fileOpen( e=>{ alert('file selected' ) }, { accept: '.png' } ); // update current tab Debug.updateTab(); // fold and unfold debugPanel.fold(); debugPanel.unfold(); // load a registered tab debugPanel.openTab(tabId)