Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to know in which file that defined a js global var in chrome console?

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.

like image 294
lovespring Avatar asked Jul 25 '12 07:07

lovespring


People also ask

How do I view global variables in Google Chrome?

To view any variable in chrome, go to "Sources", and then "Watch" and add it. If you add the "window" variable here then you can expand it and explore. Show activity on this post. Updated method from same article Avindra mentioned — injects iframe and compare its contentWindow properties to global window properties.

How do I view a JavaScript file in console?

For most browsers, to view inline JavaScript in the HTML source code, do one of the following. Press the Ctrl + U keyboard shortcut. Right-click an empty area on the web page and select the View page source or similar option in the pop-up menu.

How do I see all global variables?

Once setup, open jslinter and go to Options->check everything on the left column except "tolerate unused parameters". Then run jslinter on the webpage and scroll down in the results. You will have a list of unused variables (global and then local to each function).

How do you check JavaScript code in Chrome?

Open Chrome, press Ctrl+Shift+j and it opens the JavaScript console where you can write and test your code.


3 Answers

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

like image 106
zessx Avatar answered Oct 18 '22 05:10

zessx


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.

like image 2
kirilloid Avatar answered Oct 18 '22 05:10

kirilloid


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

like image 1
msEmmaMays Avatar answered Oct 18 '22 03:10

msEmmaMays