DevTools: Show component file path

[Cretezy]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

The new DevTools doesn't show the component file path as did the v3 version.

What is the expected behavior?

It would be great to show the component file path, it's a really important feature when working in a large codebase.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React DevTools v4 is affected, v3 had it.

[gaearon]

@GavBaros Please be more specific in your feedback. This is not helpful.

[hugos]

I agree with @GavBaros , in this new version (v4), we cannot get file locations which really slows development time, fix this asap.

[montogeek]

You can get your component file path by clicking in the "Log this component data to the console", icon is like a bug, and then copy the path from the Console.

[bvaughn]

File info isn't shown in the top level UI anymore because there are a lot of important things fighting for space in that UI. You can still see it using the debug button though.

Is this enough to satisfy your use case @Cretezy? Seems like it should be?

[Cretezy]

I think doing 4 clicks for something so basic is way to much. Putting it at the bottom (or top) of the info panel doesn't seem like it would block anything, since it's quite empty and would be very helpful (at least a copy path button would be small)

[bvaughn]

I think doing 4 clicks for something so basic is way to much.

To counter this, I don't think people use this info / look for this info often- so I'm not sure it needs to be available at a glance. I think putting less accessed info behind a click or two isn't so unreasonable.

I don't think 4 clicks is right. You have to click to select an element to begin with. Then it's:

1. Click the bug
2. Click console or type "Esc" to open the bottom console
3. Click to expand the logged element (at which point the file info is already visible)

Putting it at the bottom (or top) of the info panel doesn't seem like it would block anything, since it's quite empty and would be very helpful (at least a copy path button would be small)

Your screenshot looks like a pretty extreme edge case. Many people run this extension docked to the bottom 1/4th or so of their browser window, where there is much less height and adding it to the bottom would require scrolling.

[Cretezy]

Even 3 clicks is a lot. I know I used it multiple times a day, so does my co-workers. Maybe adding an option to display it at the bottom would be a good compromise? Even off my default is fine, but the ones that use it would be able to turn it on.

IMO, dev tools should help developers do their jobs better/faster, and an option would fulfill that purpose without impeeding others.

[ahmedam55]

I agree with @Cretezy, the old place that this piece of information where was way more accessible and easier to reach than now.

[hdwivedi9]

Please show the component file path by scrolling. It is very important for large projects. Doing it in 3 clicks is waste of time.

[hugos]

I agree with @hdwivedi9 , in large projects this is such a waste of time, just put it in the old place as it was much much better.

[bvaughn]

I don't think further comments just saying "please add this" add much value. Copy-pasting Dan's response from another issue as I think it also applies here:

There are many people subscribed to this repository. We don't want to spam them with the same comments every few hours. Additionally, we personally use GitHub notifications. If this thread gets bumped every day with a "+1", we'll eventually have to unsubscribe from it to reduce the noise. Which is likely the opposite of your intention.

Before commenting, please make sure that you're adding something that wasn't said before. If you see a similar comment to what you wanted to write, just add a 👍 reaction to it instead.

Thanks for understanding.
We appreciate your feedback but 👍s are enough to help prioritize tasks.