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).
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
every time I run my react project, I have hundreds of yellow warning coming on my Terminal. impossible to see any console.log()
I know, I am fixing them however it is talking time and I need to see a clean terminal when I am working on other thing.
I do no have a yellowwood on my simulated device as I disabled it using console.disableYellowBox = true;
I tried
YellowBox.ignoreWarnings(['Warning: ReactNative.createElement'])
console.ignoredYellowBox = ['Warning: ReactNative.createElement'];
``` in my index.js without success
I am using
react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
Have you tried debugging your app through Google chrome?
You can do so by opening the dev menu by shaking your device or if you are using a simulator by pressing cmd+d or ctrl+cmd+z on iOS and double press m on Android and then select the Debug JS option.
This will open a tab in your browser pointing to http://localhost:8081/debugger-ui/
What this basically does is redirect all the JS files to run in your browser engine directly, that way you can add breakpoints in your code by using the word debugger and they will show up in your browser just as they would when developing for the web.
You can also use the console tab of your browser to visualize console.* messages and objects that might be hard to check when using only the terminal
There is one side note though, you shouldn't always rely on remote debugging as the chrome JS engine is used during debugging and it has some slight differences from the JavaScriptCore used otherwise. These differences are mainly related to the Date() object but you can read more about that here
I keep my project(s) relatively up to date with the latest RN releases. This error seems to be coming up more and more lately.
Error: Unable to resolve module `./debugger-ui/debuggerWorker.d9da4ed7` from ``:
None of these files exist:
* debugger-ui/debuggerWorker.d9da4ed7(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
Really makes it hard when trying to debug issues and a debugger statement does noting and errors are not reported to the browser tab where the console output goes.
I've already tried wiping node_modules. Is this a known issue with a concrete fix available?
Got stuck with this exact issue for hours. Just found that this occurs only on device where app is already installed with debug mode enabled.
I fixed it by:
uninstalling manually app from device (cmd+H to display simulator home) then long click on app icon and click on cross to delete app => this forces disabling debug mode,
then run app again from xcode.
Enabling debug mode after that works normally.
I had to come across a similar issue after updating #react-native-community/cli-debugger-ui to 4.2.1. Tried out several methods, nothing worked. Reverting #react-native-community/cli-debugger-ui back to 3.0.0 resolved the issue for me.
I closed the app (pressing home twice and swiping up), then started it again from the simulator and it worked.
Happens to me recently using expo and android.
The solution was to clear all Expo Go data:
Long press the Expo go icon
Then select App info
At the bottom of the screen, press Clear Data
And press Clear all data
Relaunch expo go and the react native app
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.
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