Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chrome debugger breakpoints fail with react-scripts 2.x after hot-update

See original GitHub issue

Is this a bug report?


Did you try recovering your dependencies?

test-cra $npm --version 5.6.0

test-cra $yarn --version 1.12.3

Which terms did you search for in User Guide?

I looked for “hot-update” and “breakpoint”


System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Binaries: Node: 8.11.1 - ~/.nvm/versions/node/v8.11.1/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 5.6.0 - ~/.nvm/versions/node/v8.11.1/bin/npm Browsers: Chrome: 71.0.3578.98 Firefox: 63.0.1 Safari: 11.1.2 npmPackages: react: ^16.7.0 => 16.7.0 react-dom: ^16.7.0 => 16.7.0 react-scripts: 2.1.1 => 2.1.1 npmGlobalPackages: create-react-app: Not Found

Steps to Reproduce

  1. ran “yarn create react-app test-cra”
  2. ran “yarn install”
  3. ran “yarn start”
  4. Chrome opened a window for http://localhost:3000, with the app in it
  5. I opened Chrome dev tools and went to the source tab
  6. I hit cmd-P and opened App.js
  7. I set a breakpoint at line 7, the first line of the render() method
  8. I clicked on the “reload this page” arrow in the “React App” browser window
  9. the debugger in dev tools window stopped at the breakpoint
  10. I hit F8 to unpause

** this is all good, and I am able to repeat steps 8-10 successfully any number of times

  1. in IntelliJ I edited the App.js file so it was like this:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt={} />
            Edit <code>src/App.js</code> and save to reload.
            rel="noopener noreferrer"
            Learn React

  foo = 'bar';

export default App;

NOTE: I did not move the position of the breakpointed line within the file.

  1. I saw that the app recompiled and reloaded successfully. The code as pasted above is what appeared in the devtools source tab, and the breakpoint was positioned at the same place. However, the debugger did not stop at the breakpoint.
  2. I clicked on the “reload this page” arrow in the “React App” browser window, but the debugger does not stop there anymore. I see that at the bottom of the Source tab, it now says “(source mapped from main.{guid}.hot-update.js)”.
  3. I stopped execution of the yarn start task with control-C.
  4. I re-ran “yarn start”.
  5. the debugger does not stop on the initial page load, but it does stop on every subsequent page load (when I click the “reload this page” arrow).
  6. I see that on the bottom of the devtools Source tab, it now says “(source mapped from main.chunk.js)”.

My apologies if the format of how I described this is not matching the following bullet points - I think I have done what they ask, but in a more interleaved fashion. I think the essence is that I have described a reproducible demo with what I expected, what I did, and what happened as a result.

NOTES: this does NOT happen to me when I am using react-scripts 1.1.4 (in the full-blown app where I encountered the issue) but only appeared when I upgraded to 2.x (first 2.0.5 and now 2.1.1).

Thanks very much for your help with this!

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:76
  • Comments:67 (5 by maintainers)

github_iconTop GitHub Comments

stale[bot]commented, Jan 20, 2019

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

jsdevtomcommented, May 22, 2019

Using this to the package.json worked for me: "start:debug": "react-scripts --inspect start --no-cache --runInBand",

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chrome breakpoints don't work when using create-react-app
Chrome breakpoints don't work when using create-react-app ... debugger breakpoints fail with react-scripts 2.x after hot-update (Github).
Read more >
Breakpoints not working debugging React app in Chrome ...
I run the Create React App using npm run start and when I run the Launch Chrome debug config it automatically opens Chrome...
Read more >
Chrome debugger breakpoints not working with create-react ...
A few days ago I came across a weird issue with my Chrome debugger when I was working on my ReactJS application created...
Read more >
Cant disable breakpoints - Google Groups
Im unable to disable breakpoints in developer tools. ... few times it has happened to me it stops breaking on the removed breakpoint...
Read more >
Issue 459499: Chrome failing to stop at breakpoints ... - Monorail
I dunno what needs elaboration, but I'll try. After step 3, open the dev tools (f12) and click on the sources tab. Open...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found