Scriptbar Snippets 🚀
Handy and easy to understand snippets to keep in your browser
debug-css-toggle-box-around-all-box.js

#Basic

tiny CSS layout "debugger"

This script add a ultility method to your devtool toggleCssBoundingBox([id]) allow you to toggle bounding box accross all current page html elements

Usage

  • toggleCssBoundingBox()
  • toggleCssBoundingBox('some-unique-id-so-that-same-style-wont-be-applied-twice')

Css layout debugger demo

(() => { function toggleCssBoundingBox(id) { if (!id) { id = "scriptbar-debug-css-draw-box-around-all-box"; } const el = document.getElementById(id); if (el) { el.remove(); return console.info("Scriptbar: Successfully remove all bounding box") } var style = document.createElement('style'); style.id = id; style.innerHTML = `* { outline: 1px solid red; }`; document.getElementsByTagName("head")[0].appendChild(style); } })()
Built with ❤️ by @domnguyen and everyone on the internet 🚀