0

I am developping my React Native app using Expo with the Github Codespaces IDE. I successfully runned my app on my android phone (using expo start --dev-client --tunnel) and I have the console.log() from my app that appears in my codespace terminal.

However, it is written in the terminal that JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge)

But when I press j I have the following error:

Debug: Launching DevTools...
Debug: Error launching DevTools: The EDGE_PATH environment variable must be set to a Edge/Chromium executable no older than Edge stable.
Debug: Failed to open the React Native DevTools, see debug logs for more info.

Does anyone have an idea of how to make either Chrome DevTool or even better React Native DevTools (even if I have not completely understood if RNDT is an app by itself, a browser extension, or something else: https://reactnative.dev/docs/react-native-devtools) with Github Codespaces?

Note that I am able to use Codespaces either directly in the browser or with a local VS Code connected to CS. But that I do not have admin right on my Windows machine.

Thank you in advance for any help you could provide.

Improve this question

1 Answer 1

Reset to default
3

I found a workaround in this GitHub discussion, which works for both Codespaces and Dev Containers:

  1. Start expo with expo start
  2. Connect to the expo dev server with your simulator / physical device
  3. Go to <your codespace or dev container url>/json
    e.g. https://obscure-space-engine-grx7rgg6qp43v9j5.github.dev:8081/json (codespace)
    e.g. https://example.orb.local/json (dev container)
  4. Take note of the device and page query parameters in webSocketDebuggerUrl
    e.g. for the url ws://example.orb.local/inspector/debug?device=12345678&page=1, device is 12345678 and page is 1
  5. Open a new tab in Chrome and navigate to this URL:
    <your codespace or dev container url>/debugger-frontend/rn_fusebox.html?ws=%2Finspector%2Fdebug%3Fdevice%3D<device>%26page%3D<page>
    e.g. https://obscure-space-engine-grx7rgg6qp43v9j5.github.dev:8081/debugger-frontend/rn_fusebox.html?ws=%2Finspector%2Fdebug%3Fdevice%3D12345678%26page%3D1

Chrome will open the react-native devtools inside of that tab, including support for the Components ⚛ and Profiler ⚛ tabs.

Here's a slightly easier (scripted) approach:

# Enter the URL of your dev server (no trailing `/`)
CODESPACE="http://localhost:8081"

# Gets the `webSocketDebuggerUrl` of the most recently connected device
WS_DEBUGGER_URL="/$(curl -s "$CODESPACE/json" | jq -r '.[-1].webSocketDebuggerUrl' | cut -d'/' -f4-)"

# Urlencodes the url
ENCODED_URL="$(python3 -c "import urllib.parse;print(urllib.parse.quote('$WS_DEBUGGER_URL'))")"

# Prepares the devtools url
DEVTOOLS_URL="$CODESPACE/debugger-frontend/rn_fusebox.html?ws=$ENCODED_URL"

# Opens the devtools url in Chrome
open -a Chrome "$DEVTOOLS_URL"
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.