Class Declarations
The debug style selectors and their declarations included in Debug.css and detailed above, were chosen to highlight elements in the resulting output while keeping the visual impact as subtle as possible. The goal is for the debug output to remain structurally as close to its original counterpart as possible. Needless to say that the suggested options can be changed to meet the desired results.
Depending on the intended use, the debug output can be reviewed visually but also searched on. If, for example, variables need to be checked, a search for "[" will find all such elements in the debug output; similarly, a search for "|" will retrieve all instances of snippets, and so on.
Watermark
To further differentiate debug outputs from standard ones, the solution includes a watermark(7) implemented through Debug.css. The following declarations are included for the body selector:
body {
background-attachment: fixed;
background-clip: padding-box;
background-repeat: repeat-y;
background-origin: content-box;
background-image: url('../Images/Debug.png');
background-size: 20%;
background-position: 90% 0;
}whereas the path and filename ../Images/Debug.png to the background image should be edited as required. This image is included in the sample Flare debug project available for download.
The above declarations display a vertical ribbon-style watermark on each output page:
Downloads
The debug Cascading Style Sheet file Debug.css is available for download.
Besides, a sample debug Flare project including the said CSS is also available for download.
Disclaimer
The information and guidelines provided in this document are offered for general information purposes and, although every effort has been made to ensure they are accurate and effective, given the variety of potential code designs, the results cannot be guaranteed under all condition. The author assumes no liability or responsibility of any kind over any erroneous, bogus, or otherwise unexpected results. It remains the user's responsibility to properly apply and adapt these guidelines to each situation.
The debug quill illustration was created with Microsoft Copilot under strict animal‑welfare conditions: no creature, including bugs, was harmed or plucked in the process.
References
1 – Mozilla Developer Network Import at-rule
2 – MadCap Flare Linking stylesheets
3 – MadCap Flare own styles and properties
4 – MadCap Flare Overriding Variable Definitions in Targets
5 – MadCap Flare Find Elements
6 – MadCap Flare System variables
7 – MadCap Flare Creating Watermarks