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

【问题标题】：JavaScript: One can't view a non-global variable in the Browser Tool Console?JavaScript：无法在浏览器工具控制台中查看非全局变量？
【发布时间】：2016-10-26 15:32:40
【问题描述】：

可能是一个愚蠢的问题，但它仍然让我有点卡住，不是 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);  };

例如，用浏览器中声明的变量编写“xValues”，返回“xValues is not defined(...)”。

删除“var xValues”让它成为一个全局变量确实返回值。

我的问题：

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

【问题讨论】：

设置一个断点并在变量被命中时检查它，在代码中添加一个 console.log 行并写入值。

标签： javascript global-variables console.log

【解决方案1】：

浏览器的工具控制台看不到函数中的非全局变量？

是的。

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

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

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

如果是这样，那么这是一个寻找您错误创建的潜在全局变量的好工具吗？

没有。您应该使用诸如 ESLint 之类的 linter，它会在您忘记时发出警告，例如var 声明。同时开启strict mode：赋值给未声明的变量会报错。

除了在声明变量的函数中使用 console.log(myVariable) 之外，还有什么方法可以在浏览器的工具控制台中查看这些变量？

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

【讨论】：

【解决方案2】：

控制台必须运行代码 some 范围（并且它无法访问由无论如何都没有运行的函数定义的范围）。

在函数内部设置断点，以暂停执行。当触发该断点时，控制台的作用域将是该函数。

【讨论】：