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).
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With