Question

我是使用WebStorm调试器的新手，我正在使用它逐步浏览另一位开发人员编写的需要更新的代码。

我遇到了一种情况，当调试器在断点处暂停时，它在React组件内部显示为undefined的局部变量，尽管它具有值。代码的相关部分是这样的（我在本说明的末尾包括了该部分，尽管不是完整的模块，因为它太大了，无法提供上下文）：

      const { isDefault, render } = getRender(key);
      log.setLevel('debug');
      log.debug('render is ', render);
          renderComponent = (
            <FullPieceWrapper isDefault={isDefault}>
              <img src={`${rendersPath}/${key}/${render}.png`} alt="Render" />
            </FullPieceWrapper>
          );

我已将调试器设置为在断点处记录render的值，该断点是在以<img src=开头的行上设置的（Stack Overflow不允许我输入完整的HTML）。控制台输出如下：

render is  deco
Breakpoint reached: Render.jsx:83
undefined

为什么会这样？我宁愿依赖调试器，也不愿依赖日志语句-尤其是我希望能够在暂停断点并查看其值的同时将鼠标悬停在代码中：在上述情况下，当暂停在第83行的断点时，鼠标悬停还会将render错误地显示为undefined。

奇怪的是，当我直接将render分配给此代码段上方的另一个未使用变量时，调试器能够看到{{1} }确实具有价值。

感谢您的见解！上下文代码如下：

render

Answer 1

我的猜测是，根据Webstorm Blog post，您需要执行以下操作（如果您使用的是CRA）：

Create React App中的Webpack生成类型为cheap-module-source-map的源映射。这种源映射不能保证最精确的调试体验。我们建议使用devtool：'source-map'要更改应用程序的Webpack配置，请“弹出”应用程序。

WebStorm调试器将React组件内的局部变量视为断点，尽管它具有值，但其为“未定义”

1 个答案: