CODEWITHSUNDEEP
javascriptfirebuggoogle-chrome-devtools
randombits
randombits

Reputation: 48430

Finding the location of defined JavaScript using Firebug or alternative tool

I am attempting to locate where a particular class/function/object is defined on a site with many javascripts being rendered. Manually sifting through the scripts has proven to be very time consuming in the 'Scripts' panel of Firebug.

Before I continue going that route, is there an easier way using modern front-end development tools to locate where certain things are defined? Would be great if I had some kind of ctags type functionality that vim provides, but any other approach would be great.

Upvotes: 1

Views: 263

Answers (2)

Scott Puleo
Scott Puleo

Reputation: 3684

Chrome has Find in all Sources:

CTRL-SHIFT-F on Windows and CMD-OPT-F on Mac.

Edit:

You can also use CMD-SHIFT-O (mac) CTRL-SHIFT-O (windows/linux) in chrome to find functions by name.

enter image description here

Upvotes: 1

machineghost
machineghost

Reputation: 35730

AFAIK none of the standard dev tools (Chrome Debugger, Firebug, etc.) offer this functionality. You can sort of get it by typing the object's name in the Chrome debugger, but that will just show you something like "Backbone.View.extend.extend.constructor". In other words, it shows you the root-most constructor, which is fine if all your classes are exactly one level deep. If not though, for instance if A is a subclass of B and B is a subclass of C, knowing that your object "a" comes from C doesn't really help much.

Furthermore, even if it is what you want, Chrome won't tell you where to find the constructor, just its name. Personally I solve this by giving all my objects a _type property (or attribute, for the ones that are Backbone models). This way I can simply type myObject._type (or myObject.get('_type') for the models) and know what kind of object I have. And since I give every object type a unique name, all it takes to find the cunstructor is grep for that name.

Upvotes: 0

Related Questions