Breakpoint gets moved down when Chrome debugger is launched

[arnavb]

Describe the bug

In one of my components (my TodoList component), I'm trying to set a breakpoint on a line where two variables are destructured from this.state in a form submit callback. The relevant code for the component is below:

import React, { Component } from 'react';
import TodoItem from './TodoItem';

let todoId = 1;

export default class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todoValue: '',
      items: [],
    };
  }

  onChange = event => {
    this.setState({
      todoValue: event.target.value,
    });
  };
  
  // -----------------------------------------
  // THIS FUNCTION HERE --v
  addItem = event => {
    const { todoValue, items } = this.state; // I'm trying to set a breakpoint on this line

    this.setState({
      todoValue: '',
      items: [...items, { value: todoValue, id: todoId++ }],
    });

    event.preventDefault();
  };
  // -----------------------------------------

  render() {
    const todoItems = this.state.items.map(todo => (
      <TodoItem value={todo.value} key={todo.id} />
    ));

    return (
      <div className='todoList'>
        <form onSubmit={this.addItem}>
          <input
            type='text'
            onChange={this.onChange}
            value={this.state.todoValue}
            placeholder='Enter a task'
          />
          <input type='submit' value='Add' />
        </form>

        <ul>{todoItems}</ul>
      </div>
    );
  }
}

My VSCode launch config is the following (launch.json):

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Here is a video illustrating what happens with my breakpoints: https://drive.google.com/file/d/1hTlCNSEY0eASSdyrOku1sC0yRPXnWhsB/view?usp=sharing

(The video may not be visible initially because it's being processed, but it should be downloadable).

Did you try recovering your dependencies?

Yes

npm -v output: 6.10.0

Which terms did you search for in User Guide?

Breakpoints, debugging, which both led to this and then from there I found this, which doesn't help me all that much.

Environment

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: Not Found
    npm: 6.10.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    react: ^16.8.6 => 16.8.6 
    react-dom: ^16.8.6 => 16.8.6 
    react-scripts: 3.0.1 => 3.0.1 
  npmGlobalPackages:
    create-react-app: 3.0.1

Steps to reproduce

1. git clone https://github.com/arnavb/react-todo-app
2. code -r react-todo-app.
3. Copy my launch.json code from above into .vscode/launch.json (Create it if it doesn't exist yet).
4. Run npm start in the integrated terminal. Don't start Chrome debugger yet.
5. Open src/TodoList.js and set a breakpoint on line 23 (const { todoValue, items } = this.state;).
6. Start debugging. Notice how the breakpoint has moved down to line 25.

Expected behavior

The breakpoint wouldn't move and I would be able to hit it when I click the Add button in my todo list.

Actual behavior

The breakpoint is moved down to line 25. When debugging, line 23 is just skipped.

Video demo: https://drive.google.com/file/d/1hTlCNSEY0eASSdyrOku1sC0yRPXnWhsB/view?usp=sharing

Reproducible demo

(I tried making the example smaller, but somehow the issue always got fixed when some lines were moved around or removed. This leads me to wonder whether this is some sort of source map issue)

https://github.com/arnavb/react-todo-app

[heyimalex]

Related to #6296 maybe?

[iansu]

Can you try the latest release and see if this has improved? If not please open a new issue.