Hermes debugging using Chrome DevTools not working since 118.0.5993.70 update

[116-7]

Description

After having Chrome automatically update to 118.0.5993.70 on MacOS Hermes debugging using DevTools as described in the React Native documentation is no longer working.

Testing with Chrome Beta 119.0.6045.21 reveals same issue.

Google's release note for 118.0.5993.70 include mention of a change "CVE-2023-5475: Inappropriate implementation in DevTools." However, the link to Google's bugtracker is not public so it might not be related.

Workaround possible by installing previous version of Chrome for Testing - 117.0.5938.149 as per instructions on Chromium's website.

npx @puppeteer/browsers install chrome@117.0.5938.149

React Native Version

0.72.6

Output of npx react-native info

System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1
Memory: 63.69 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 16.16.0
path: ~/.nvm/versions/node/v16.16.0/bin/node
Yarn:
version: 1.22.19
path: ~/.nvm/versions/node/v16.16.0/bin/yarn
npm:
version: 8.11.0
path: ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.11.3
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.15.1
path: /Library/Java/JavaVirtualMachines/jdk-11.0.15.1.jdk/Contents/Home/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

1. npx react-native@latest init AwesomeProject
2. npm start
3. Select either Android or iOS emulator
4. Open Chrome 118.0.5993.70+ and navigate to chrome://inspect
5. Attempt to connect via Chrome DevTools to localhost:8081
6. Observe missing items under Remote Target section of chrome://inspect

Snack, screenshot, or link to a repository

Screenshots showing issue as well as working example in all Chrome versions mentioned in description as well as both Android and iOS.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[116-7]

@huntie

https://bugs.chromium.org/p/chromium/issues/detail?id=1492849

There was a recent Chromium update that appended "?for_tabs" to the /json/list request and due to the implementation of InspectorProxy in metro-inspector-proxy@0.76.8 which is included with the current RN 0.72 boilerplate app the entire url from the pathname rightwards is being compared to the path-only variables PAGES_LIST_JSON_URL, and PAGES_LIST_JSON_URL_2.

[motiz88]

@116-7 well spotted! Note that the code for the inspector proxy has moved into the React Native repo. This is where we'd need to fix the routing logic:

react-native/packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

Lines 97 to 100 in 3d5324a

	if (
	request.url === PAGES_LIST_JSON_URL ||
	request.url === PAGES_LIST_JSON_URL_2
	) {

[116-7]

Thanks @motiz88

Here is a PR #41005

Given this is affecting the current stable boilerplate version of RN (and possibly a lot of older versions) there may be hotfixes needed to the previous versions of metro-inspector-proxy as well.

[motiz88]

It looks like Chrome is working on a fix on their side, which might be sufficient as far as old RN releases go: https://chromium-review.googlesource.com/c/chromium/src/+/4942670

[draculapile]

Hi guys, I followed your lead and found this in Chrome's flag settings, changed it to disable and under the remote target RN will show again! Thanks and I hope this helps :)

[anthonylindev]

Hi guys, I followed your lead and found this in Chrome's flag settings, changed it to disable and under the remote target RN will show again! Thanks and I hope this helps :)

Hi, where can I find this setting? I'm having this issue currently on RN 0.72.6 :/

[116-7]

Hi guys, I followed your lead and found this in Chrome's flag settings, changed it to disable and under the remote target RN will show again! Thanks and I hope this helps :)

Hi, where can I find this setting? I'm having this issue currently on RN 0.72.6 :/

chrome://flags

[anthonylindev]

Thanks! It's appearing now on iOS physical device after disabling it :)

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.