Hacker News Reader

Comment by nsxwolf | Hacker News Reader

You know what I've always wanted in a front end framework, as a back end developer that sometimes is forced to work on front end tickets? I want a development build mode that generates some kind of project metadata where I can just point to something on the screen and get a report of all the interesting files in the project that are responsible for what I'm seeing:

* API calls

* Templates

* CSS

* Controllers, etc.

My usual technique of finding some text content, looking for an i18n file and working my way backwards is tedious.

View on HN

Most of the major frameworks (I'm 100% sure about Vue and React) have browser extensions that give you extremely powerful dev tools. It's not _exactly_ what you're asking for, but pretty close. You can actually click on a random thing, see which component it is, what kind of state it's holding internally etc.

Apologies if you're aware of this already but every browser has a web inspector built in where you can point and click on something and at least see the HTML and CSS associated with it.

and you can also click on a request in the network tab and find out the line of code triggered it, including callstack

also with react dev tools you can click somewhere on the page and see the react component, it's props, etc. similar tools are available for other frameworks

And vuejs has a browser plugin which can sort-of show you which components call which components to get there.

React and Redux both have similar addons as well, to inspect the component tree and to see the state changes over time (and even roll back; "time travel debugging" has been one of Redux's primary features since it was released).

Directly surfacing the effects involved, e.g. HTTP calls via all the event handlers through layers of nesting, would indeed be nice.

I’m not sure how other browsers’ dev tools do on this front, but at least in Chrome most requests in the Network tab will link to the file/line of code which initiated the request. From there you should be able to set breakpoints or whatever to track subsequent requests.

Sveltekit has a thing now where when I do the standard ctrl shift c and highlight something, it’ll open the file in vscode responsible for it. It’s honestly a little bit unsettling, but I think it’ll be useful with some practice.

You may be looking for `sourcemap`s, which store a record of the transpilation that has happened and let you work backwards. Your browser's tools should fetch them by default if they're available, but depending on your frontend stack, they may not be generated by default.

Reply on news.ycombinator.com