I put down the Cheetos, read the message, and pulled up the website. The focus state of an input box was misbehaving. When clicked on, it turned blue like someone’s eyes on Dune, but this is planet Earth, so I had a mystery.
I opened the dev inspector and immediately saw that the culprit was JavaScript. An inline style was being added to the input box.
outline: rgb(0, 24, 255) solid 2px !important;
transition: 0.3s;
outline-offset: -2px !important;
We had the murder weapon, but these days, everyone uses JavaScript for everything, so we weren’t any closer to uncovering the culprit. I GREPed the codebase for a few incriminating strings, but nothing turned up, so I decided to bring in a torpedo. I knew this big buffoon from my templating and data-binding days. I set a MutationObserver loose on the unsuspecting input box. After a few clicks, the input box was singing like a canary trying to stay out of Sing Sing. I thanked the MutationObserver, but it couldn’t have done its dirty work without console.trace.
const canary = document.querySelector('input');
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
console.log('Style changed:', canary.getAttribute('style'));
console.trace('Stack trace for style change:');
}
});
});
observer.observe(canary, { attributes: true });
The stack trace clearly showed that the Userway accessibility snippet was kicking off the style changes. Some good samaritan had gone into the Userway configs and changed the focus color for form elements across the entire site. It turned out that it was the client who had done that. So, the client had hired me to uncover their own crime.
It’s a crazy city we live in. My head was spinning after this one. I felt confused and betrayed, and I only knew one thing for certain: console.trace is your best friend when you’re too busy even to finish a bag of Cheetos.
