Programmatically accessing function scope using Chrome DevTools console

Question

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.

Both setting breakpoints and using heap snapshots requires me to interact with the DevTools GUI. I'm looking to programmatically search through the information displayed in DevTools. For the app I'm working on, there are far too many objects for me to want to manually sift through heap deltas or click-and-expand through stacks. — bdkosher
– bdkosher, Commented Sep 5, 2014 at 12:06

Community · Accepted Answer · 2017-05-23 12:24:31Z

4

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?

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Sep 4, 2014 at 18:57

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

2 Comments

bdkosher Over a year ago

Is there a way to export Chrome's console.dir output tree (outside of screenshot + OCR) to a text file?

Bergi Over a year ago

I don't know of any. Theoretically you should be able to fork the open-source debugger an add such a functionality…

Collectives™ on Stack Overflow

Programmatically accessing function scope using Chrome DevTools console

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related