I think the "WhyLine" idea is already mainstream, at least for web UI development. I remember back in the days, if you wanted to know "why" a html is rendered

I think the "WhyLine" idea is already mainstream, at least for web UI development. I remember back in the days, if you wanted to know "why" a html is rendered the way it is, you just had to change/delete random parts of it and see what breaks. After firebug was introduced (mid 2000s?), you can just right click to inspect element and it will highlight the html element responsible for it. Nowadays, I am reasonably happy with the type of questions that the chrome dev tools can answer with just a few clicks. Why did some network request fire? There's an initiator column that links to the source code. Why did this frame take so long to render? There's a flame graph where each bar links to source code. And there are plenty of extensions you can install to help with the particular level of abstraction you're debugging at (for example inspect React components instead of html elements).