I have been developing with React Native and in the past I was able to debug with Chrome devtools, though it was often sub-optimal and really affected application performance.
Know Chrome devtools just don't work. I try setting breakpoints and they don't set, or jump to some random line far below where I wanted it. I try adding "debugger;" to the code and the debugger does not stop on it.
Nothing seams to work and I have been using console.warn as my debugging, which is not awesome. I have read the docs etc. Any help would be welcome.
Ensure that "JS Dev mode" is on and and "JS minify" is off in Dev settings (Shake menu). In the past this has happened to me on many occasions where I would turn Dev mode off and forget. Breakpoints will not be hit if it's off.
Related
When enabling "Debugging" in the ios simulator and open chrome for debugging.
The first time works perfectly but when change code and refresh automatically.
After that Debugging points somewhere else. I understand there is a mapping issue while debugging.
Any solution for this?
Debugging mapping attached to the project when we start project or reload but at the time of hot reloading (auto refresh) will not update that mapping correctly.
For update the mapping correctly you have to reload it.
In physical devices: Shake the device it will open a window choose 'reload' option.
For simulator: by pressing command+R or command+control+z and choose 'reload' option.
For emulator mac OS: by pressing r+r (2 times).
In chrome developer tools, try switching to network tab, and check "Disable cache". It might help
I guess that I've tried every solution that exists on the internet about this issue, and nothing works, and I don't even know where to look anymore. It started to happen from nowhere and I can't even open the app settings shaking the phone, it's completely stuck on this screen.
I cleaned up NPM, Yarn, Expo's caches and disabled the Remote Dev Tools.
I would be so much thankful for any help.
In my case it was due to the a remote debugger.
I left the remote debugging on, put the mac in sleep and when I turned it on again the iOS Simulator remained stuck at bundling 100%, irrespective of what I've tried (kill simulator, expo r -c, Reload app, etc.)
However, I could have realized the root cause earlier because on the physical device it was working the entire time.
Hope this saves someone some time.
You could try reverting to your last known working commit, then incrementally adding back the changes until this happens again. This often is a result of delaying hiding the splash screen (perhaps via AppLoading or SplashScreen) and then not hiding it because of some error in the app code preventing the code to hide it from being called.
Try Disable Debug Remote JS in the IOS Simulator
by clicking ctrl + cmd +Z on Mac
It works for me.
Seems like something is wrong with the dependencies, just close down the react-native environment ( android studio) and your IDE, just closing and restarting may work if not, check for updates or delete and reinstall your dependencies ( expo i )
Recently I switched from Ionic framework to vue-native (vue.js wrapper around react-native), everything seems to be cool, development is fast and easy, but I have some real issues with debugging those apps. With Ionic Framework (Cordova) I was able to open an app in web browser and could easily manage Vuex state (for example) from Chrome Console. It doesn't seems so easy and trivial in react native world. Is it possible to have similar debugging experience in vue-native? When my app starts to grow and gets complicated it's really hard to handle it other way around. Any help appreciated.
Basically all my problems gone away when I ported my apps to Expo (which allows for JS remote debugging) and grabbed React Native Debugger - https://github.com/jhen0409/react-native-debugger.
Important part is having simulator installed on your developer machine (like iphone simulator) because debugger doesn't play nicely with real machines.
Inside debugger hit cmd+t to open a new window and set port to 19001 (because of Expo using this port). Now start expo with npm start command and in Expo panel hit 'Run in simulator' button.
In simulator make a shake gesture (ctrl+cmd+z) and allow remote debugging in developer menu.
Done. Pleasant experience similar to one known from Cordova. You have a js console, you can inspect elements and change styles live. Expo comes with live reload to make things smoother.
More info here: https://docs.expo.io/versions/latest/workflow/debugging/
Unfortunately, you cannot debug script parts in the VUE files in Chrome Dev Tools (you can put the breakpoints, but they are not working well), but if you put the methods to a separate JS file, it works like a charm. I know, it's a workaround, but not a big pain, and working well.
See my TODO app for example: https://github.com/TheBojda/VueNativeTodo
Every now and then, my iOS simulator becomes extremely slow. Am unable to deterministically say when this happens. One solution seems to be "Reset Content and Settings.." effectively turning off chrome debugging and then restarting the app. Has anyone faced this issue ? If yes, are there any solutions to continue debugging in Chrome without any performance hit.
Didnt face this on the previous versions. Now on ^0.35
React Native console.log will slow everything down if Chrome tab displaying the log messages is not visible. You can try react native debugger and see if you have same issues.
https://github.com/jhen0409/react-native-debugger
I use Chrome Debugging and Live Reload to debug React Native applications.
Whenever you save a file, the Chrome screen reloads and in doing this, gets focus. This is annoying. Is there anyway to disable this focusing behaviour?
The Chrome debug page is opened by the launchChromeDevTools.applescript script in the react-native package.
You can disable it grabbing the focus by opening this file in your project:
./node_modules/react-native/packager/launchChromeDevTools.applescript
and commenting out the activate line by inserting -- in front.
(This annoyed me enough to hunt down how to do it; it might be worth filing an issue on react-native to make it an option).