I am trying to access the debugger for iOS for a React Native project using Expo but for either Hermes or JSC specified as the jsengine in the app.json file, I am unable to use Chrome Dev Tools (hot key "j" while the metro server is running), or any debugging env for that matter. For Hermes pressing "j" gives the warning
"Debug: No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine."
For JSC the bundler loads up to 98% but then the app launch times out indicating the dev server cannot be reached. Additionally for Hermes, when I press command+D (Mac OS) when app is running, I see no option for debugging the app. I am using the expo "AppEntry.js" file as my entry point as specified in my package.json.
What am I missing regarding proper debug setup for iOS?
The app runs and is debuggable using the Hermes engine for the Android platform. Using Expo Go is not an option in my case (assume this is due to react-native-firebase incompatibility).
Here's my app.json:
{
"expo": {
"name": "NatureCounter",
"slug": "NatureCounter",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"jsEngine": "hermes",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true,
"bundleIdentifier": "crowddoing.world.naturecounter"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"package": "com.naturecounter"
},
"web": {
"favicon": "./assets/favicon.png"
},
"extra": {
"eas": {
"projectId": "bed483af-b658-4941-8cc1-a909337111a1"
}
}
}
}
and here's the package.json:
{
"name": "NatureCounter",
"version": "1.0.0",
"main": "expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-community/checkbox": "^0.5.17",
"@react-native-community/datetimepicker": "^8.2.0",
"@react-native-community/netinfo": "11.3.1",
"@react-native-firebase/app": "^21.0.0",
"@react-native-firebase/auth": "^21.0.0",
"@react-native-firebase/dynamic-links": "^21.0.0",
"@react-native-firebase/firestore": "^21.0.0",
"@react-native-firebase/installations": "^21.0.0",
"@react-native-picker/picker": "^2.8.1",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/drawer": "^6.7.2",
"@react-navigation/native": "^6.1.18",
"@react-navigation/stack": "^6.4.1",
"@reduxjs/toolkit": "^2.2.7",
"@shopify/react-native-skia": "^1.4.1",
"@types/react": "~18.2.79",
"axios": "^1.7.7",
"axios-rate-limit": "^1.4.0",
"expo": "~51.0.28",
"expo-status-bar": "~1.12.1",
"immutable": "^4.3.7",
"lodash": "^4.17.21",
"lottie-react-native": "^7.0.0",
"moment": "^2.30.1",
"native-base": "^3.4.28",
"rand-seed": "^2.1.7",
"react": "18.2.0",
"react-native": "0.74.5",
"react-native-background-fetch": "^4.2.7",
"react-native-bluetooth-status": "^1.5.1",
"react-native-bouncy-checkbox": "^4.1.2",
"react-native-calendars": "^1.1307.0",
"react-native-chart-kit": "^6.12.0",
"react-native-devsettings": "^1.0.5",
"react-native-easy-grid": "^0.2.2",
"react-native-elements": "^3.4.3",
"react-native-extra-dimensions-android": "^1.2.5",
"react-native-fbsdk-next": "^13.1.1",
"react-native-fs": "^2.20.0",
"react-native-geolocation-service": "^5.3.1",
"react-native-gesture-handler": "~2.16.1",
"react-native-get-random-values": "^1.11.0",
"react-native-image-picker": "^7.1.2",
"react-native-linear-gradient": "^2.8.3",
"react-native-maps": "^1.18.0",
"react-native-modal": "^13.0.1",
"react-native-outside-press": "^1.2.2",
"react-native-paper": "^5.12.5",
"react-native-paper-dates": "^0.22.26",
"react-native-permissions": "^5.0.2",
"react-native-raw-bottom-sheet": "^3.0.0",
"react-native-reanimated": "3.16.1",
"react-native-reanimated-carousel": "4.0.0-alpha.12",
"react-native-redash": "16.2.2",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.11.0",
"react-native-scroll-bottom-sheet": "^0.7.0",
"react-native-simple-time-picker": "^1.3.11",
"react-native-simple-toast": "^3.3.1",
"react-native-svg": "^15.7.1",
"react-native-svg-uri": "^1.2.3",
"react-native-vector-icons": "^10.2.0",
"react-native-video": "^6.6.3",
"react-native-wheel-pick": "^1.2.2",
"react-redux": "^9.1.2",
"realm": "^12.13.1",
"redux-actions": "2.6.5",
"redux-devtools-extension": "^2.13.9",
"redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^3.1.0",
"rn-fetch-blob": "^0.12.0",
"styled-components": "^6.1.14",
"typescript": "~5.3.3",
"victory-native": "^41.4.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"react-native-svg-transformer": "^1.5.0"
},
"private": true
}
Wow, I'm a little embarrassed that I didn't notice this earlier, but there is a Podfile.properties.json file in the ios directory of the auto-generated project I was completely unaware of until now that was overriding the jsengine as "jsc" (hence the warning indicating hermes engine was not enabled). Simply had to set "expo.jsEngine": "hermes" in that file to enable debugging with Chrome Dev Tools for the ios side of the project.