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

Question

我正在使用捆绑器 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 devtools，非常强大，绝对值得花一些时间来熟悉它们。

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

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

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

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

有时设置断点对于仅获取变量值来说可能过于费力。只有 console.log 你可能会收到很多不同的消息。为了更容易找到您需要的消息，如果您希望最初折叠群组，您可以使用 console.group which lets you put messages inside a group, that can be expanded and collapsed. The groups can also be nested. Use console.groupCollapsed。

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

How to get javascript variables in a debugger when using webpack

javascript

debugging

webpack

webpack-dev-server

webpack-2