Finding the location of defined JavaScript using Firebug or alternative tool

Question

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.

I'd like to know this, too. It would be especially handy when answering SO questions, since I don't know what's going on in the questioner's site. — Barmar
– Barmar, Commented Apr 25, 2013 at 20:38
I've edited my question. class/function/object, whatever. If someone even has a simple object definition of a = {}; and later uses a.bar = "foo", I'd love to be able to go back to find what file the a in current scope was defined in. — randombits
– randombits, Commented Apr 25, 2013 at 20:42

Scott Puleo · Accepted Answer · 2013-05-10 10:40:42Z

1

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

edited May 10, 2013 at 10:40

answered Apr 25, 2013 at 20:59

Scott Puleo

3,68426 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sebastian Zartner Over a year ago

In Firebug you can search via Ctrl+F/⌘+F.

machineghost · Accepted Answer · 2013-04-25 20:52:16Z

0

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.

answered Apr 25, 2013 at 20:52

machineghost

36k33 gold badges174 silver badges271 bronze badges

2 Comments

randombits Over a year ago

Thanks for this information. I suppose the problem is, I see an attribute being used over and over and I cannot find where there was an assignment made to it. It's a site's source that I don't own, which makes it even worse.

Sebastian Zartner Over a year ago

Right. None of the tools does let you jump from a function call or a variable usage to it's definition at the moment. I created an issue for Firebug covering this a while back.

Collectives™ on Stack Overflow

Finding the location of defined JavaScript using Firebug or alternative tool

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related