CODEWITHSUNDEEP
javascriptreactjsdebuggingwebstorm
Cerulean
Cerulean

Reputation: 6013

WebStorm debugger sees local variable inside React component as 'undefined' on breakpoint although it has a value

I'm new to using the WebStorm debugger -- I'm using it to step through code that another developer wrote that I need to update.

I've encountered a situation in which the debugger, when I pause at a breakpoint, shows a local variable inside a React component as undefined, although it has a value. The relevant section of code is this (I include the section from which it comes at the end of this note, although not the complete module, as it is too large, in order to provide context):

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

I've set the debugger to log the value of render at the breakpoint, which is set on the line that starts with <img src= (Stack Overflow won't let me enter the full HTML). The console output is the following:

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

Why might this be happening? I would rather rely on the debugger than on log statements -- particularly I would like to be able to mouseover variables in the code while paused a breakpoint and see their values: in the above case, when paused at the breakpoint on line 83, a mouseover also shows render, erroneously, as undefined.

Curiously, when I assigned render to another, unused variable directly above this piece of code, the debugger was able to see that render did indeed have a value.

Thanks for any insight! The context code follows:

class Render extends React.Component {
  render() {
    const {
      selected: { type, view: selectedView },
      hovered: { view: hoveredView },
      getRender,
      isFirstStep,
      renders,
    } = this.props;

    const imagesPath = `/images/${isFirstStep ? 'common' : type}`;
    const rendersPath = `${imagesPath}/renders`;

    let renderComponent = null;

    const view = hoveredView || selectedView;

    if (view === 'frontal') {
      const { render } = getRender('frontal');
      renderComponent = (
        <FullPieceWrapper>
          <img src={`${rendersPath}/frontal/${render}.png`} alt="Render" />
        </FullPieceWrapper>
      );
    } else if (renders.length > 1) {
      renderComponent = (
        <PiecesWrapper>
          {renders.map((key) => {
            const { isDefault, isHidden, render } = getRender(key);
            return (
              render ? (
                <Piece
                  key={key}
                  isDefault={isDefault}
                  isHidden={isHidden}
                  src={`${rendersPath}/${key}/${render}.png`}
                />
              ) : null
            );
          })}
        </PiecesWrapper>
      );
    } else if (renders.length === 1) {
      const [key] = renders;
      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>
      );
    } else {
      renderComponent = null;
    }

    return <Wrapper>{renderComponent}</Wrapper>;
  }
}

Upvotes: 0

Views: 235

Answers (1)

Stathis Ntonas
Stathis Ntonas

Reputation: 1262

My guess is that according to Webstorm Blog post you need to do the following (if you’re using CRA):

Webpack in Create React App generates source maps of the type cheap-module-source-map. This kind of source maps do not guarantee the most precise debugging experience. We recommend using devtool: 'source-map' To make changes to the app’s Webpack configuration, ‘eject’ the app.

Upvotes: 1

Related Questions