-->

How to know in which file that defined a js global

2020-02-24 11:12发布

问题:

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.

回答1:

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.

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:

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.



回答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.



回答3:

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