无法从Chrome控制台中看到变量，但可以通过代码进行访问

Question

为什么可以从方法内部而不是从浏览器控制台访问变量？

我有以下打字稿代码，使用angular6，是在Windows 10（当前的Chrome）上通过ng serve运行的。

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
}

我将代码驱动到该功能。休息时，请在Chrome控制台中尝试：

> console.log(d3.scaleLinear)

它引发错误：

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)

如何直接在控制台中访问d3？我错过了什么？我查看了关于该主题52332640的旧有SO问题，但找不到最终的答案。

Answer 1

如果页面有任何框架，则控制台可能在错误的上下文中运行。 有一个下拉列表可让您指定正确的上下文

例如，在此屏幕截图中，有两个IFrame元素。为了从“ contentIframe2”中运行的脚本访问变量，我必须切换上下文