Popover CSS Inspector for Bootstrap 5
Contents
I recently spent a while looking for a CSS inspector JavaScript library that would function in a way similar to DevTools elements inspector that would show the CSS rules applied to a component. I couldn’t find one that worked the way I wanted, so I decided to build one myself.
I wanted to make it so it’d be easy to use, look nice and be customizable with the ability to turn certain CSS properties on or off. I decided to base the inspector on Bootstrap 5’s popover component as it’s a nice looking component that’s easy to customize.
The compiled JavaScript is only 3KB minified and gzipped and every CSS property can be turned on or off by adding the data-css-inspector-hide or data-css-inspector-show attributes to the popover trigger element.
The inspector can be used on any element, not just Bootstrap components. The inspector is also responsive and will reposition itself if it goes off the screen and is also fully customizable with CSS variables.
Using it is as simple as adding the data-bs-custom-class="popover-css-inspector" attribute to the popover trigger element and loading the JavaScript:
<script src="/js/popover-css-inspector.min.js" defer></script>
Check it out, I hope you find it useful!
