JavaScript: 无法在浏览器工具控制台中查看非全局变量？

Question

可能是一个愚蠢的问题，但它仍然让我有点困惑，不能 100% 确定答案。

所以我有一个 index.html 文件，它调用 example.js 文件中的一个函数（只是为了说明而添加它）：

function sinusGraph() {
var plotstart = 0, 
    plotrange = 20,
    stepsize = 0.5; // not in use right now

var yValues, xValues;

function sinusValues(startinput, stopinput) 
{ 
    return d3.range(startinput, stopinput+1).map(function(i) 
    {
        return Math.sin(i);
    })
};

function xAxisValues(startinput, stopinput) 
{ 
    return d3.range(startinput, stopinput+1).map(function(i) 
    {
        return i;
    })
};

xValues = xAxisValues(plotstart, plotrange); 
yValues = sinusValues(plotstart, plotrange);  };

例如，使用浏览器 return 中声明的变量编写 "xValues" "xValues is not defined(...)"。

删除 "var xValues" 让它成为一个全局变量 return 值。

我的问题：

浏览器的工具控制台看不到函数内的非全局变量？
如果是这样，那么这是一个寻找您错误创建的潜在全局变量的好工具吗？
除了在声明它的函数中使用 console.log(myVariable) 之外，还有什么方法可以在浏览器的工具控制台中查看这些变量吗？

Answer 1

控制台必须运行代码一些范围（并且它不能访问由不是运行的函数定义的范围不管怎样）。

在函数内部设置一个断点，在那里暂停执行。当触发该断点时，控制台的范围将是该函数。

Answer 2

The browser's Tool Console can't see non-global variables within functions?

是的。

这就是它不起作用的原因：函数的局部变量仅在函数处于运行时才存在。您在控制台中键入的代码将在函数执行之前或之后执行。
即使您能够在函数执行后访问局部变量：

当您在控制台中键入 varname 时，您希望得到哪个值？初始值、最后值或所有值？
如果多个函数有一个同名的局部变量怎么办？
如果同一个函数已经执行了多次怎么办？

您只能检查应用程序的当前状态。

If that is the case, then is this a good tool to look for potential global variables that you have created by mistake?

没有。您应该使用诸如 ESLint that warns you if you forget e.g. a var declaration. Also enable strict mode 之类的 linter：分配给未声明的变量将引发错误。

Is there any way to view these variables in the browser's tool console, other than using console.log(myVariable) within the function where it is declared?

Set a break point 在您的代码中，通过开发工具或通过 debugger。代码执行将在断点处暂停，控制台可以访问断点处可访问的所有内容。

JavaScript: 无法在浏览器工具控制台中查看非全局变量？

JavaScript: One can't view a non-global variable in the Browser Tool Console?

javascript

global-variables

console.log