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);  };

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

删除“var xValues”使其成为全局变量确实会返回该值。

我的问题:

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

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

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

Answer 1

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 的 linter如果您忘记了，它会警告您一个 var 声明。同时启用 strict mode :对未声明的变量进行赋值将引发错误。

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在您的代码中，通过开发工具或通过调试器。代码执行将在断点处暂停，控制台可以访问断点处可访问的所有内容。