What is the best way to find where things are in a large Backbone codebase?

Question

I just started my first dev job, and I’m kind of overwhelmed. I don’t really understand how I’m supposed to find where things are in the code. For example, if I load a certain page of the application, how can I find out where that particular view is in the code? How can I find where that view is getting its information from?

Basically I need a way to trace the information as it’s moving through the application to find out what I need to edit. I know there’s the call stack/sources tab in the Chrome dev tools but I don’t really know how to make them show what’s happening.

The application has a Java backend and a backbone/marionette frontend, if that helps. My previous experience was with React, which made much more sense to me. I'm really struggling to figure out how to find things. With React, I could use the Chrome dev tools, find the div's classname or whatever, then find the right component in the files. But this strategy doesn't appear to be working with Backbone.

Answer 1

In chrome dev tools, you can try to inspect an element > right click > break on > subtree modifications. Do this on the element which is changing content while navigating views, you should be able to find the view component that is responsible for it.

Answer 2

In backbone we generally divide UI in two parts one is HTML template and other is view(js file).To find out which view is responsible for rendering a screen component copy id or css class name of a UI element from chrome developer tool. Now search for that id or cssClass in whole project. Probably 1 or more items will appear in search results. if it is a template then search for its view (which is rendering it). In this way you can find which view is responsible for rendering a UI component