我正在使用捆绑程序 Webpack 开发一个反应应用程序。 我想用浏览器控制台调试这个应用程序（这里我使用 chrome）。
我在我的 webpack 配置中使用了 source-maps 和等价物：
devtool = 'inline-source-map';
现在错误会与原始文件的确切行一起显示。 问题是我想通过控制台访问实时变量。
到目前为止，我找到了两种显示方式：
1- 在 webpack.config.js 中添加一个库
output: {
library: "lib"
},
在代码export var foo = 34; 中导出变量，最后在浏览器控制台中使用lib.foo。
2-使用断点并访问文件中设置的变量
还有其他访问实时变量的解决方案吗？
谢谢
【问题讨论】：
标签： javascript debugging webpack webpack-dev-server webpack-2
还有其他解决方案，但这意味着定义全局变量，应该避免这样做，因为它可能会对您尝试调试的代码产生副作用，因此您可能会遇到与公开和不公开变量，这会让您的调试体验非常沮丧。
最好使用断点来进行调试。浏览器调试器，尤其是 Chrome 开发工具，非常强大，绝对值得花一些时间来熟悉它们。
因为在您为到达某个点而设置的每个断点处暂停应用程序可能很乏味，您可以使用条件断点。一种方法是在您的代码中使用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 选项卡中，您还可以右键单击任意位置并将文件夹添加到工作区，这样您就可以直接编辑源并将更改保存到磁盘（在旧版本的Chrome 将文件夹添加到工作区有点复杂）。要让 Chrome 知道 webpack 的 source maps 对应于你的工作空间，你可以右键单击任何 webpack source map 并选择 Map to File System Resource... 并选择正确的文件工作区。之后，webpack 的所有源都应该自动映射到正确的文件。现在您可以在那里设置断点，当您更改某些内容并保存时（Ctrl + S 或 Cmd + S），webpack 将重新编译它。另见Set Up Persistence with DevTools Workspaces。
有时设置断点对于仅获取变量值可能会花费太多精力。仅使用console.log，您最终可能会收到很多不同的消息。为了更容易找到您需要的消息，您可以使用console.group，它可以让您将消息放入一个可以展开和折叠的组中。这些组也可以嵌套。如果您希望最初折叠组，请使用 console.groupCollapsed。
【讨论】：