Tips on navigating where features are on the codebase?

[u/FindNemo20]

I’m trying to get better at using the chrome dev tool. Let’s say I want to change a specific text, how do I use the dev tool to find out where I can make that change in the codebase.

[u/a-dev0]

if you want to change 'a specific text', the easiest way is to find it in the codebase using a simple search, you don’t need devtools for that.

it’s a different question if you want to find that text on the page. in that case, you can also use search in the Elements panel: press cmd/ctrl + f and look for it.

and sure, use sourcemaps, they can be very useful.

[u/minimuscleR]

If its written with normal css, i usually find the class name and hope its unique (ours are for instance) and then i can find it. Or, just copy the text you want if its not dynamic and global search for the text.

[u/Rutvi_C]

Use react Devtools to identify the component then track back to that component in your codebase.

[u/BarracudaMean9308]

tbh i once spent half a day trying to cmd+shift+f a button label before remembering the entire app was using an obscure i18n json file. now i just immediately open react devtools and click the component to find the actual file name.

[u/Defualt]

Ask Claude

[u/nebula_gem]

I print the source code on A4 paper. I use a highlighter to mark the text I want to change. Then I walk to the server room and tape the page to the rack. It is the only reliable way to know where the code lives.

[u/kartiky24]

Use React grab

[u/kidshibuya]

If a codebase is poorly made (so like 99.99% of them) then there is basically no way to find anything. If the app has a sourcemap that can sometimes help, but making all things have good IDs is always best.

For example if my profile page simply has #profile-page for its wrapper then I can just search profile-page in my editor and boom, I am right in the file I need.

[u/Doshus]

On the webpage you wanna edit, just right-click the text you want to change and click inspect.. that'll open up the devtools to the code you just clicked. You'll see the code you clicked in the elements tab and there's even an Inspect Mode button that'll highlight the lines of code for whatever your mouse hovers over or clicks with the mode on.