Can't always set React Native breakpoints in Chrome

While debugging my React Native app in Chrome, I'm often unable to set breakpoints in the Sources tab. When I click on a line of code to add the breakpoint, a breakpoint is added instead to the next function declaration line in my module.

This doesn't happen in all of my source modules, but often enough that it prevents me from debugging efficiently.

I'm currently using RN 0.22 but this has been happening on older versions of RN as well (e.g. RN 0.18).

How do you keep breakpoints?

Set breakpoints in source code To set a breakpoint in source code: Click in the far left margin next to a line of code. You can also select the line and press F9, select Debug > Toggle Breakpoint, or right-click and select Breakpoint > Insert breakpoint. The breakpoint appears as a red dot in the left margin.

How do I run React Native app in Chrome?

To use Chrome's DevTools with React Native, first make sure you're connected to the same Wi-Fi, then press command + R if you're using macOS, or Ctrl + M on Windows/Linux. When the developer menu appears, choose Debug Js Remotely . This will open the default JS debugger.

This problem maybe caused by babel. When use normal function and arrow function together, it happened.