3 ms·

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 b

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.

RandallBrown 3y ago
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.
- commotionfever 3y ago
  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
- rubinlinux 3y ago
  And vuejs has a browser plugin which can sort-of show you which components call which components to get there.
  - Izkata 3y ago
    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).
- nine_k 3y ago
  Directly surfacing the effects involved, e.g. HTTP calls via all the event handlers through layers of nesting, would indeed be nice.
  - eyelidlessness 3y ago
    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.
frio 3y ago
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.
MatekCopatek 3y ago
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.
roblh 3y ago
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.

RandallBrown 3y ago

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.

commotionfever 3y ago
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
rubinlinux 3y ago
And vuejs has a browser plugin which can sort-of show you which components call which components to get there.
- Izkata 3y ago
  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).
nine_k 3y ago
Directly surfacing the effects involved, e.g. HTTP calls via all the event handlers through layers of nesting, would indeed be nice.
- eyelidlessness 3y ago
  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.

frio 3y ago

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.

MatekCopatek 3y ago

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.

roblh 3y ago

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.