If you're using React Native version >= 0.62 and keep React Native Debugger as the latest version, here is what you can do:
In your app project, make sure the react-devtools-core
dependency to match the React DevTools version. Add resolutions in your package.json
for Yarn:
{
"resolutions": {
"react-devtools-core": "~4.28.0"
}
}
or NPM:
{
"overrides": {
"react-devtools-core": "~4.28.0"
}
}
Reference: Unsupported DevTools backend version - # React Native Debugger
If the React Native version of your project doesn't support [email protected]
, please consider downgrade React Native Debugger version to v0.12.
Network fetch got issue like SyntaxError: Unexpected token o in JSON at position 1
if Network Inspect enabled
This may be caused by some library used / made fetch polyfills, it may used Blob
but RNDebugger does not support it. If you got this issue, try to use global fetch
/ XMLHttpRequest
instead, or try #382#issuecomment-544226529.
Debugger causes app to load stale JS bundle (#423)
This issue was fixed by v0.10.9 and v0.11.1. If you are still using the old version for some reason, you can turn off Network cache manually on devtools:
- For Android and React Native version less than v0.60, you need to add and link
react-native-devsettings-android
package - If you're not using dev bundle (dev=true) from React Native packager, it will not working as expected.
- For some reasons, some dependencies may affected Promise behavior. It is recommended to use the initial project to find out the reason.
- If you are sure it is caused by a new version of React Native, please file an new issue.
You may have got a problem when you often reload JS, devtools process takes your RAM even more than 1G, it does not seem to clean.
In case of using official remote debugger, tested a initial project with remote debugging mode on Chrome 62 (beta), continuous reload JS 30 times:
Fortunately, the current versions of RNDebugger (Chromium 58) is better than Chrome (maybe >= 59?), but it still has a amount of growth:
To avoid similar problems in the future, there is a way to restart the Chrome devtools (macOS: CMD+OPTION+I
, Linux/Windows: CTRL+ALT+I
), the same applies to official remote debugger on Chrome. You can also consider to use timesJSLoadToRefreshDevTools
option in Config file in home directory.
If you're getting the following error:
It may caused by xip.io
service (RN use it for debug on real device), it lead your machine IP doesn't resolved sometimes. It's enabled by default, you can disable it in RN custom script on Xcode if you sure you don't need the service:
React Inspector get stuck at "Connecting to React…" for RN ^0.43 (#45)
It usually on Android, the problem is related to requestIdleCallback
API (try to check if it not work on debug mode).
This issue have been fixed in react-devtools-core@^2.3.0
, please ensure the version is correct in your React Native project (Note that it's dependency of react-native
).
Also, sometimes it have timer problem between host machine and device (emulator), you need make sure date & time
setting is correct:
Or try to restart your device (emulator).
[Windows 10] React native debugger process starts but no visible window (#459)
This issue is caused by Windows 10 dark mode, for a workaround please disable dark mode and enable it again after launching react-native-debugger