7

Why is a variable accessible from inside a method but not from the browser console?

I have the following typescript code, using angular6, run via ng serve on Windows 10, current Chrome.

import * as d3 from "d3"; // from "npm i d3 --save" version 5.7
// picking a member of d3, nothing magical about "scaleLinear" here
console.log("see", d3.scaleLinear) // it prints ok, ƒ linear() {...

// angular component code fragment below

somefunction() {
    console.log("see again", d3.scaleLinear) // it prints ok, again
    // add a break here
}

I drive the code to that somefunction. At break, in Chrome console when I try:

> console.log(d3.scaleLinear)

it throws an error:

VM2012:1 Uncaught ReferenceError: d3 is not defined
    at eval (eval at push../src/app/user-sel/user-sel.component.ts.UserSelComponent._resyncYSel (user-sel.component.ts:58), <anonymous>:1:13)
    at UserSelComponent.push../src/app/user-sel/user-sel.component.ts.UserSelComponent._resyncYSel (user-sel.component.ts:58)
    at UserSelComponent.push../src/app/user-sel/user-sel.component.ts.UserSelComponent.selYSel (user-sel.component.ts:166)
    at Object.eval [as handleEvent] (UserSelComponent.html:75)
    at handleEvent (core.js:21673)
    at callWithDebugContext (core.js:22767)
    at Object.debugHandleEvent [as handleEvent] (core.js:22470)
    at dispatchEvent (core.js:19122)
    at core.js:19569
    at HTMLSpanElement.<anonymous> (platform-browser.js:993)

How can I access d3 in console directly? What did I miss? I looked at old SO questions on this topic 52332640 but could not find a conclusive answer.

Dinesh
  • 4,437
  • 5
  • 40
  • 77
  • 1
    Possible duplicate of [Why does Chrome debugger think closed local variable is undefined?](https://stackoverflow.com/questions/28388530/why-does-chrome-debugger-think-closed-local-variable-is-undefined) – ic3b3rg Dec 21 '18 at 04:19
  • Does your page have frames? – jasonscript Dec 21 '18 at 04:24
  • 2
    `import * as d3 from "d3";` doesn't create variable in global (window) scope it is inside a closure. You can write for example `window.d3 = d3;` to get access to it – wanjas Dec 21 '18 at 04:28
  • @ic3b3rg I added `debugger` right after accessing `d3.scaleLinear` but still cannot access the variable in the Console. – Dinesh Dec 21 '18 at 17:46
  • @wanjas that worked, thank you. Right after import I assigned `window.d3=d3;` and now can access it in Console. So where is this variable residing without that extra assignment? – Dinesh Dec 21 '18 at 17:47
  • @wanjas if you post that as answer then I will accept that as a solution – Dinesh Dec 21 '18 at 17:49

1 Answers1

-1

If your pages have any frames, your console could be running in the wrong context. There is a dropdown that will allow you to specify the correct context

For example, in this screenshot, there are two IFrame elements. In order to access variables from scripts running in "contentIframe2" I have to switch the context

Console Context

jasonscript
  • 6,039
  • 3
  • 28
  • 43