11

In 2014, it was not possible for JS code to access variables inside a closure from outside the closure. Since then, Chrome's internals have changed to use [[Scopes]] instead of Closure.

Is it now (2018) possible for Chrome DevTools to read [[Scopes]] programmatically? If so, is there an existing DevTools extension that does so?

Use case: inspecting variables inside a UMD module loaded using RequireJS. I know I can do this at a breakpoint or debugger statement using the Scopes panel, but would like to be able to do so even when I am not at a breakpoint.

Edit As of 2017, it was not possible to access [[FunctionLocation]], but I don't know about [[Scopes]].

Attempts

I have investigated the following without success (module factory function name main):

  • This comment mentions console.dir(), but there is no programmatic access to the output of console.dir(). I can use console.dir({main}) and then expand the results manually, but not programmatically.

  • From the DevTools console, I can use inspect({function}) per this. That gets me closer, but not to [[Scopes]]:

    > var x = inspect({main})
> x.main.name
← "main"
> x.main[Symbol('Scopes')]
← undefined
> x.main['[[Scopes]]']
← undefined

  • The chrome.devtools.inspectedWindow API provides an eval method that can use inspect. However, I can't get from the inspect results to [[Scopes]], as noted above.

Notes

  • Posting a new question rather than bumping the 2014 one as suggested by this Meta answer
  • Different from this question because I am trying to access module internals rather than the public module interface
cxw
  • 16,685
  • 2
  • 45
  • 81
  • https://stackoverflow.com/questions/41146373/access-function-location-programmatically – Jonas Wilms Sep 03 '18 at 13:52
  • @JonasWilms Thanks - I did see that one but forgot to link it in the question. Any difference between `[[FunctionLocation]]` and `[[Scopes]]` in terms of access rights? – cxw Sep 03 '18 at 13:57
  • 1
    You still cannot programmatically access them (from code in the page or in the console). That they changed the name under which they display that internal property doesn't change anything. – Bergi Sep 03 '18 at 14:06
  • A devtools extension might be able to do this however. Is that what you want to create? – Bergi Sep 03 '18 at 14:08
  • @Bergi Yes, if there isn't already a devtools extension, I would be delighted to create one :) . However, I cannot find access to `[[Scopes]]` in the DevTools API docs linked in the question. I am hoping someone can point me to an API I'm missing. – cxw Sep 03 '18 at 14:16
  • 1
    @cxw [devtools API](https://developer.chrome.com/extensions/devtools) is indeed disappointing. It seems very restricted and only allows light customisation, such as getting the currently inspected windows and adding own panels to the devtools view, but there is no access to the internal data structures. It seems that you should focus on the [debugger API](https://developer.chrome.com/extensions/debugger) which allows you to access the runtime objects, and also gain access to [internal properties](https://chromedevtools.github.io/devtools-protocol/tot/Runtime#type-InternalPropertyDescriptor) – Bergi Sep 03 '18 at 16:03

0 Answers0