Conflict Detection

Code that loads fine can still collide. Two blocks define an animation with the same name and the second wins everywhere. Two fixed elements both sit in the bottom right corner and overlap. A snippet sets an id that an injection also sets, and a script grabs the wrong one. None of this throws an error. It just renders wrong, usually on a page you were not looking at. The Conflicts screen finds these before your visitors do.

What it catches

Two kinds of trouble. Code collisions are exact: 2 blocks setting the same id, defining the same @keyframes animation, declaring the same top-level script name, loading the same library, or setting the same custom property on :root. Layout overlaps are spatial: 2 elements pinned to the same corner of the screen. The overlap is measured in the browser for the real result rather than guessed, so a pair that pins to different corners and cannot overlap is not reported.

Everything that can put code on a page

It does not only check injections against each other. It looks across the site-wide head, body, header, and footer code, the per page code, the header and footer sets, and the injections, all together. It also expands your snippets, so a snippet’s code is checked wherever the snippet is used, not only where it is defined. If 2 things can land on the same page, it considers them.

Detection levels

The depth is yours to set in the plugin settings. Turn it off. Keep it on collisions only. Add layout overlaps. Or go deeper. Set it to match how much you want to hear about, and raise it when you are chasing something specific.

Marking a conflict intentional

Sometimes an overlap is on purpose, or a shared property is exactly what you meant. Mark that pair intentional and it goes quiet, while everything else keeps reporting. A marked pair is still listed, so nothing is hidden, it is just moved out of the way.

Exporting the report

The Export conflicts button downloads the whole report as a file, with the code behind each side of every conflict. It helps for working through a busy site away from the screen, or for handing the picture to someone else. For an error that only shows up once code runs rather than where it sits, see The injection error log.