debugging does not work in Chrome
Closed this issue · 23 comments
Description
I really like a lot of things about React Native, but debugging is really sub-par. WHEN the Chrome development tools "kinda" work with RN performance becomes so slow that you cannot really do anything, including debug.
I am unable to set breakpoints, they just don't set or they "jump" to other lines and still don't work. Even if I put "debugger" in my code it does not stop on those statements. I end up using console.warn statements, which is also far from optimal.
Totally get that RN is new, it is hard to make it all play nice etc. etc., but wow would it be great to have a decent debugging experience.
This my not qualify as a bug, as in some exception, but it definitely is a bug in usability. This problem is not only me and my computer/setup. I have seen the same issues with other people I code with.
Additional Information
- React Native version: 0.31 and 0.36
- Platform: Android
- Operating System: Mac OSX
- Chrome Version 54.0.2840.87
So I have been having similar issues related with a game that I have been developing. Chrome Developer Tools basically useless, which really is unfortunate since they are actually helpful.
What I have been doing is using console.warn to get output in my simulator, or using adb logcat from the command line to see console.log statements. While both work, I like modern convenience and the fact that JS is an interpreted language and I can play around with it in a debug environment.
Any how, figured let's update to 0.36 start code over and see if there was something I was doing that broke things.
What I found, by chance for me, was that if you have even one extra Chrome window/tab open besides the Chrome Developer Tools window the debugger basically does not work, WTF.
With just the Developer Tools open debugger actually works, again WTF. There is still a performance hit, but at least for me it is usable.
Hope this helps others.
UPDATE:
while debugging is working better, there still are problems with the sourcemap not mapping correctly. For some of my files debugger or breakpoints do not stop there "visually," i.e. while the debugger actually stops at these points and you have access to vars etc. the visual debugger puts you on a totally different line.
Same here, but closing all chrome tabs besides developer tools doesn't help.
- React Native 0.36 & 0.37
- Platform Android & iOS Simulator
- OS macOS
- latest Chrome 54.0.2840.98
@holleB it is a bummer that debugging via Chrome is not better. Hopefully it will get some love, the annoying part is that it is inconsistent, i.e. for some people it appears to work fine for other no go :(
Not only that, but it is inconsistent in the same project, I have some files that it works fine, some files that the source-map does not work. Sometimes when debugging performance is horrible, sometimes it is good :(
+1
- RN: 0.37
- iOS Simulator
- MacOS: 10.11.5
- Chrome: 54.0.2840.98 (64-bit)
Ok, so after days of trying to fix this I stumbled upon a workaround. At least for me the problem tends to appear in files > 100 lines with multiple arrow functions. So my workaround ist to split these files without changing the functionality of the code. Sounds strange but works :-( Very unsatisfying, but I neither have the time nor the javascript foo to figure out the root cause.
That's not good. I've been working on this and it seems to be with the
source maps. There is an issue on FB RN about it. Hopefully it will be
addressed.
On Nov 15, 2016 8:14 AM, "holleB" notifications@github.com wrote:
Ok, so after days of trying to fix this I stumbled upon a workaround. At
least for me the problem tends to appear in files > 100 lines with multiple
arrow functions. So my workaround ist to split these files without changing
the functionality of the code. Sounds strange but works :-( Very
unsatisfying, but I neither have the time nor the javascript foo to figure
out the root cause.—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#10729 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABORPFeFyzCCBoKkCnerhTuDZjIEFNgTks5q-b3VgaJpZM4KpKz6
.
@holleB, if you remove the arrow functions does that also work?
@hamicornfury Tried but didn't work. But what seems to work is the fix mentioned bartonhammond/snowflake#164 by @wookiem. Thx a lot guys!
FYI. I was having trouble setting breakpoints when I had function someFn() {}.
Replace
function someFn() {}
with
const someFn = () => {}
There can't be ANY functions in the source file you're trying to set a breakpoint in.
@duhseekoh You've made my day!! This has been a huge PITA for me.
Would you mind posting your solution to: http://stackoverflow.com/questions/37078774/cant-always-set-react-native-breakpoints-in-chrome/40532885#40532885
@duhseekoh I added your detailed solution to the stackoverflow link that I referenced.
I think we can consider this issue closed now.
I believe this is a source maps issue unrelated to RN or Webpack, but exacerbated by them. It's been around since Backbone. Which source map style are you using? Also, ProTip, try moving your breakpoint to the next line and leverage "debugger" statements. If you're logging you're wasting time.
Hey @jhabdas,
I am facing the same issue where when I set a breakpoint, it is automatically moved to the next function declaration. I suspected it had something to do with the source map when the code is transpiled by babel. Do you have any tips on how to fix it? Even pointing to an issue being more actively tracked would help.
I don't think changing all the function declarations like was suggested before is an acceptable solution. It is just a workaround.
Thanks in advance
Thanks
Tips:
- Add a line of code immediately above the line you want to break on and reset your breakpoint after it shifts when the source maps are rebuilt
- Add "debugger" where you want to break, then remove it when you're finished
- If the breakpoint you set in Dev Tools jumps to the bottom of the block when you set it, try it anyway as looks can sometimes be deceiving
Point to an issue? Nope. Been seeing the problem since Backbone + jQuery. Does it happen in Firefox or WebKit? That will be your tell as to the root cause.
Just FYI , try this again with RN 0.42. The source map generation was refactored and it seems to have solved similar issues in my company's app.
@astapinski Thanks! That worked for me just in time!
I have tried the "debugger" approach before but it did not work. The issue is mainly visual and I am saying that because when I take a look on the context when the breakpoint is hit it shows me all the variables in original place I put the breakpoint. I just wanted a way to fix this because it is so annoying.
I will try the RN 0.42 and see if it works :)
So far what worked for me was the suggestion made by @duhseekoh. I don't understand why there can't be ANY functions in the source file you're trying to set a breakpoint in.
Thanks!
Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!
If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:
- Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
- If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
- Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.
If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.
Hi, we are using 0.53 version of react native and still can't use breakpoints consistently. Sometimes when setting a breakpoint it's moving the bottom, or sometimes it's moving to the completely different file. Would be good to reopen this issue. Can someone explain how it's working and why it's working incorrectly (setting a breakpoint). I would like to contribute on the fix. Thanks.
Adding "sourceMaps": "inline" to .bablerc fixed this for me.
@jim-lake's suggestion cured my blues. If there are no downsides to this I vote to add this to core.
@duhseekoh thanks a lot... it worked like a bliss... dont know the reson though, but good until chrome developers fix their dev tool totally :)