Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatically accessing function scope using Chrome DevTools console

When I open up Chrome (v35) DevTools and inspect an object, the console can show me things nested within functions, including something labeled as the '"function scope".

For example, when looking at stackoverflow.com, I can see that there's a global $ object containing another function called Callbacks. Callbacks, as does $, has a functional scope containing Closure and Global.

screenshot of Chrome DevTools console

  • Question 1: What is the difference between some named object nested directly within a function and some object contained within a Closure in its function scope?
  • Question 2: How do I programmatically reference a function scope in the console? window.$.Callbacks.???? chrome.function???(window.$.Callbacks)

The reason I ask is because I'm looking for memory leaks and would like to search the objects held within functions' closures based on object types and property names.

like image 553
bdkosher Avatar asked Sep 04 '14 18:09

bdkosher


People also ask

How do I find a function in DevTools?

(open Chrome dev-tools), Windows: ctrl + shift + F , or macOS: cmd + optn + F . This opens a window for searching across all scripts.

What is $$ in Chrome console?

$ is an alias for document. querySelector . In the same vein there is $$ which is an alias for document. querySelectorAll . It is defined in the Command line (console) api.


1 Answers

What is the difference between some named object nested directly within a function and some object contained within a Closure in its function scope?

The object nested directly with the function is a property of the function object. For example, $.Callback has a .length property with value 1, it does have a .prototype property, it does inherit (__proto__) from Function.prototype etc.

The object in the scope is a variable that is accessible from the scope that surrounds the function. See How do JavaScript closures work?

How do I programmatically reference a function scope in the console?

You cannot. Scopes are not programatically accessible. I don't think the devtools have any helpers to allow this either. See also How do I search through scope variables in Google Chrome Developer Tools?

like image 80
Bergi Avatar answered Sep 29 '22 18:09

Bergi