javascript - 使用 webpack 时如何在调试器中获取 javascript 变量

Question

我正在使用 bundler Webpack 开发一个 React 应用程序。 我想用浏览器控制台调试这个应用程序(这里我使用 chrome)。

我在我的 webpack 配置中使用了 source-maps 和等价物:

devtool = 'inline-source-map';

现在错误显示在原始文件的确切行中。 问题是我想通过控制台访问实时变量。

到目前为止，我找到了两种显示它们的方法:

1- 在 webpack.config.js 中添加库

output: {
    library: "lib"
}, 

在代码中导出变量 export var foo = 34; 最后在浏览器控制台中使用 lib.foo。

2- 使用断点和访问文件中的变量集

是否有另一种访问实时变量的解决方案？

谢谢

Answer 1

还有其他解决方案，但这意味着定义全局变量并且应该避免，因为它会对您尝试调试的代码产生副作用，因此您可能会遇到与暴露和不暴露变量，这会让您的调试体验非常令人沮丧。

使用断点是您可以为调试目的做的最好的事情。浏览器调试器，尤其是 Chrome 开发者工具，非常强大，绝对值得花一些时间来熟悉它们。

因为在您为到达某个点而设置的每个断点处暂停应用程序可能很乏味，因此您可以使用条件断点。一种方法是在你的代码中使用 debugger 语句，在这种情况下你可以用任何你喜欢的 JavaScript 来保护它，例如这只会在 input 到函数是 5:

function debug(input) {
  if (input === 5) {
    debugger;
  }
  // Other code
}

另一种方法是在 Chrome 开发工具中添加条件断点。配置源映射后，您可以在 Sources > top > webpack://> 下的原始源代码中设置断点。
要设置条件断点，您只需右键单击一行并选择 Add conditional breakpoint... 并输入条件，例如输入 === 5。您还可以编辑断点... 来更改现有断点或将条件添加到现有断点。有关 Chrome 中断点的更多信息，请参阅 Pause Your Code With Breakpoints .

在Sources 选项卡中，您还可以右键单击任意位置并将文件夹添加到工作区，这样您就可以直接编辑源并将更改保存到磁盘(在旧版本的Chrome 将文件夹添加到工作区有点复杂)。要让 Chrome 知道 webpack 的源映射对应于你的工作区，你可以右键单击任何 webpack 源映射并选择 Map to File System Resource... 然后你只需选择正确的文件工作区。之后，webpack 的所有源都应该自动映射到正确的文件。现在您可以在那里设置断点，当您更改某些内容并保存它时(Ctrl + S 或 Cmd + S)，webpack 将重新编译它。另见 Set Up Persistence with DevTools Workspaces .

有时设置断点对于仅获取变量值来说可能过于费力。仅使用 console.log，您可能会得到很多不同的消息。为了更容易找到您需要的消息，您可以使用 console.group它允许您将消息放入一个可以展开和折叠的组中。组也可以嵌套。使用 console.groupCollapsed如果您希望最初折叠该组。