Debug

Debugger v1.1.0

Utilities for inspecting screen sizes and errors in spacing or overlapping elements.

Class

attribute	css
debug="outline"	background: rgba(255, 0, 0, 0.1); box-shadow: 0 0 0 1px red; outline: 1px solid red
debug="screen" v1.1.0	@media (min-width: `{screen}`) { [debug="screen"]::after { content: "`{size}`" }}

Note: Utility customizing is unavailable.

Lorem Ipsum

Lorem Ipsum

Apply debug="outline" to <html> tag.

<!-- Example -->
<html debug="outline">
  ...
</html>

Apply debug="outline" to <body> tag.

<!-- Example -->
<body debug="outline">
  ...
</body>

Apply debug="outline" to almost any elements.

<!-- Example -->
<y debug="outline"> ... </y>
<span debug="outline"> ... </span>

Apply debug="screen" to inspect the current screen size. The indicator will display at top-left of the browser viewport.

<!-- Example -->
<y debug="screen"></y>