32

How to find out which file and line a variable was defined in using google chrome console?

For example, the variable Native (from MooTools) has been defined in global scope. I want to know in which file that defined this variable using google chrome console.

Esailija
  • 138,174
  • 23
  • 272
  • 326
lovespring
  • 19,051
  • 42
  • 103
  • 153
  • 3
    It looks like you are just asking someone to search for something in [a file](https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools.js)? How is that a programming problem? How was that useful for 2 people? What is going on? – Esailija Jul 25 '12 at 07:56
  • 1
    @Esailija in chrome console, not just for this time or for mootools. – lovespring Jul 25 '12 at 07:59
  • 1
    If your question is "How to search which file a variable was defined in using chrome console" your question needs a serious edit, because right now you are just outsourcing people to do a `Ctrl+F` search in a file... – Esailija Jul 25 '12 at 08:00
  • @Esailija I'm not good in English, could you helep me editing the question? – lovespring Jul 25 '12 at 08:04
  • @Esailija Searching in a file isn't a suitable answer when the variable name is something like a single letter where searching for that letter would return thousands of results. – Michael Aug 27 '23 at 15:48

3 Answers3

34

Using chrome :

  1. Open the Web Inspector
  2. Show the console and check if the var you're searching for exists (ex : Native Enter)
  3. Click on the Resources panel
  4. Enter Native=, var Native or Native = in the top right search field
  5. You've got your result !

Here, there's only one result for the Native= search. The result is automatically highlighted, and the corresponding file opened. In my example, you can see the Native declaration was in mootools.core.js, line 12.

Got it !

EDIT: March 2015 (thanks to TML)

The top right search field doesn't exist anymore, in latest Chrome versions.
Instead of, click on Show drawer in the top right corner (or hit Esc), and select the Search tab that just appeared in the bottom of your screen:

enter image description here

EDIT: November 2015 (thanks tzvi)

You now need to use the three-dot button in the top right corner to find a Search all files option.

enter image description here

Community
  • 1
  • 1
zessx
  • 68,042
  • 28
  • 135
  • 158
  • 2
    this is the only way for now :( – lovespring Sep 18 '12 at 17:22
  • 3
    As of March 2015, this "Search" box is [not visible](http://imgur.com/09ss5CR) on the Resources tab of Chrome Developer Tools on OS X – TML Mar 05 '15 at 15:44
  • Fantastic, @zessx! Thanks, and have some more +1's. :) – TML Mar 05 '15 at 16:01
  • It has changed yet again >O In Version 46.0.2490.52 (my current version) the search is moved somewhere else ( or removed ) i'm not really sure. – AccidentallyC Oct 06 '15 at 02:03
  • 1
    In version: 46.0.2490.80 use Ctrl+Shift F or use the menu in the upper right corner(those three vertical dots)->Search all files – tzvi Nov 09 '15 at 19:18
  • Ugh. This is NOT useful if the variable name is something that returns thousands of results in a text search, like a single letter variable name! – Michael Aug 27 '23 at 15:50
2

You may search for "var Native" in "Resources" (2nd) tab.

Function definition may be found from "Scope variables" block, from context menu, but there's no such feature as "Find where this variable come from / was defined" in Chrome's WebInspector.

kirilloid
  • 14,011
  • 6
  • 38
  • 52
1

Native is defined in core.js line 437

var Native = this.Native = function(properties){
    return new Type(properties.name, properties.initialize);
};

Native.type = Type.type;

Native.implement = function(objects, methods){
    for (var i = 0; i < objects.length; i++) objects[i].implement(methods);
    return Native;
};

https://github.com/mootools/mootools-core/blob/master/Source/Core/Core.js#L437

a quick file search for a = assignment is almost always the way to go

msEmmaMays
  • 1,073
  • 7
  • 7