Unable to see the changing content in attributes of the element clearly

[otomad]

Using with Edge DevTools (both new DevTools UI and legacy DevTools UI) to inspect element, if some content in the DOM is changing, It will turn its background color into violet. However the text color of the attributes of elements is also violet. So I cannot see anything changing content clearly. This is very useful when debugging an incorrect animation classes.

https://github.com/MicrosoftEdge/DevTools/assets/56647156/8e02f6d8-7709-4d65-89dc-71ea3289068e

When the animation frequency becomes fast enough, I can't even see anything clearly.

https://github.com/MicrosoftEdge/DevTools/assets/56647156/a20748e1-344f-48d2-b426-ca4728e1e084

So I had to activate high contrast theme in order to see the content clearly.

https://github.com/MicrosoftEdge/DevTools/assets/56647156/8d50facb-4bb5-4f5f-b2a9-30d9a2e6b03b

But it works correctly in Chrome.

https://github.com/MicrosoftEdge/DevTools/assets/56647156/57ba2e83-8a2e-4b36-a1f2-7b335801f7cb

AB#48728993

[captainbrosset]

Thanks so much for filing this bug. This is probably a problem with the Edge DevTools theme CSS files. I'll make sure this is tracked on our team's backlog so we can get to it.

[dminhhoang26]

I think there is an issue with dev tool, dev tool is shown in split screen mode and a blank area above it.

[captainbrosset]

Thanks @dminhhoang26. I'm moving this to a new issue because this is unrelated to the attribute color problem that @otomad reported here.