Overview & How It Works
The ln-debug diagnostic engine is activated by placing data-ln-debug on the <body> element. It acts as a comprehensive runtime and DOM linter during development: monitoring DOM mutations and custom events, verifying that cross-referencing IDs (like data-ln-toggle-for or data-ln-modal-for) point to existing elements, and ensuring data consumers resolve to registered stores.
It also checks all data-ln-* attributes against the library's formal schema catalog, immediately warning in the console about typos using Levenshtein string distance. In production builds, diagnostic checks remain completely dormant or are excluded via stylesheet stripping, ensuring zero runtime overhead.
Development-Only Warning
These warnings are powered by the ln-ashlar-dev.css stylesheet. In production environments, this stylesheet is excluded, guaranteeing zero layout overrides and zero performance penalty.
1. Missing Table Wrapper ID Warning
Flags interactive table wrappers [data-ln-table] that are missing a unique id attribute (which is required for mapping search and column filters correctly).
| Title | Category |
|---|---|
| Strategic Plan.pdf | Planning |
2. Modal Trigger Missing Target Warning
Flags a modal trigger [data-ln-modal-for] that is declared with an empty value, so it has no target modal id to open.
3. Image Missing Alt Attribute
Flags an <img> that has no alt attribute at all. An empty alt="" is intentionally allowed — it is the valid, WCAG-endorsed pattern for purely decorative images, so it is never flagged.
4. Abbr Missing Title
Flags an <abbr> that is missing its title attribute. Without a title the abbreviation has no expansion and is meaningless to readers and assistive tech.
The agency known as NASA was founded in 1958.
5. Empty Tooltip (No Title Fallback)
Flags a [data-ln-tooltip] declared with an empty value and no native title fallback, so it would render an empty bubble. An empty data-ln-tooltip with a title present is valid (it falls back to the title) and is not flagged.
6. Correct Implementation (No Errors)
When the HTML structure and attributes are fully correct, no diagnostics warnings are shown.
|
System Service
|
Status |
|---|---|
| Web Server (Nginx) | Active |
| Database Server (MariaDB) | Active |
Writing Your Own Diagnostic Rules
You can easily extend the linter by writing your own CSS selectors in scss/ln-ashlar-dev.scss and using the shared DRY mixins.
The system provides two shared mixins in config/mixins/_diagnostics.scss:
@include dev-dom-error($message): Best for wrapping block elements with a dashed red border and a warning header.@include dev-inline-error($message): Best for injecting red text warning labels next to small elements or headers.
Example: Flagging form elements missing name attributes
// Warns if any text input inside a validation form is missing its name attribute
[data-ln-validate] input[type="text"]:not([name]) {
@include dev-dom-error("Input is missing a 'name' attribute, which prevents serialization.");
}