Why does the React Native debugger always launch in the x86 version of Chrome instead of the arm64 version?

Working on a project in react native with Expo/Hermes on an M1 Mac, I encountered a frustrating issue. When attempting to open the debugger by hitting "open debugger," it launches an x86 version of Chrome, resulting in sluggish performance. What could be causing this?

I do not have that specific version of Chrome installed on my machine, so it's perplexing why it keeps opening.

Current Chrome version: 120.0.6099.129 (Official Build) (arm64)

React Native version: 0.72.5

Expo version: 49.0.10

To replicate the problem:

  1. Execute npx expo run:ios --device
  2. Application successfully runs on the device
  3. Press m │ toggle menu
  4. Select "Debug Remote JS" on the device

Answer №1

The web browser displayed here is actually an Embedded Chrome DevTools Panel, which can typically be found within your node_modules.

As stated on this documentation page:

Hermes supports the Chrome debugger by implementing the Chrome DevTools Protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or on a physical device.

In the Hermes Debugger/Expo tab, it only references Chrome for debugging purposes. However, I have discovered a detailed guide outlining how to set up remote debugging:

  1. Visit the debugger URL in your browser. For example: http://localhost:8081/debugger-ui
  2. Open the Console using CMD + Shift + J.
  3. Press CMD + D on Simulator and choose "Debug JS Remotely".
  4. Press CMD + R on Simulator.
  5. Check the Console in the Browser.

Although this method is now deprecated in react-native 0.73, it remains functional on version 0.72.5. It may still run slowly as it continues to rely on chrome for debugging purposes.

If you wish to explore the newer debugging approaches in later versions of react-native, including utilizing Safari for debugging, refer to the steps outlined on this page.

You could also experiment with Flipper to see if it offers improved speed, but keep in mind that it also utilizes the same chrome Devtools Panel according to the documentation.

https://i.sstatic.net/ZSSyb.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How should we provide the search query and options when using fuse.js in an Angular application?

Having previously utilized fuse.js in a JavaScript project, I am now navigating the world of Angular. Despite installing the necessary module for fuse.js, I'm encountering difficulties implementing its search functionality within an Angular environmen ...

The Observable constructor in Nativescript must be called with the 'new' keyword in order to be invoked

I am facing a challenge while attempting to upload a multipart form in nativescript using http-background. The error message "Class constructor Observable cannot be invoked without 'new'" keeps appearing. I have tried changing the compilerOptions ...

How to simulate keyboard events when a dropdown list is opened in an Angular application

Requirement- A situation arises where upon opening the dropdown menu, pressing the delete key on the keyboard should reset the index to -1. Steps to reproduce the issue: 1. Click on the dropdown and select an option from the menu. 2. Click on the dropdow ...

The Angular Firebase query is being run repeatedly

I'm currently facing an issue in my project where Firebase queries are being executed multiple times. This problem wasn't present during development and no changes have been made to the Firebase dependencies. Below is a snippet of code that used ...

Node's TypeScript parser loses the order of same name-tags when converting XML to JSON

I've experimented with xml2js and fast-xml-parser and received similar results from both (in different formats, but that's not the focus here) This specific example is from fast-xml-parser Here's the XML data: <test version="1" ...

Tips for keeping an item consistently at the top in a React Native application

Within my flatlist, I have a card that is displayed when a user makes a post. However, the card currently appears randomly on the screen. I would like the card to always be rendered at the top of the screen whenever a user makes a post, similar to how it ...

Error message: The build process for the react native gesture handler has

Exploring the realm of React-Native as a newcomer, I am currently working on an app to showcase my skills. Everything has been going smoothly until I encountered react-navigation today. Following the guidelines provided at https://reactnavigation.org/docs/ ...

What is the best way to conditionally render one of several components in a manner that is compatible with React's change detector?

Within my CRUD application, I have incorporated various reusable components such as a "generic" DialogComponent, along with several non-reusable components. Throughout the development process, I have encountered numerous instances where I need to either: ...

Creating an array with varying types for the first element and remaining elements

Trying to properly define an array structure like this: type HeadItem = { type: "Head" } type RestItem = { type: "Rest" } const myArray = [{ type: "Head" }, { type: "Rest" }, { type: "Rest" }] The number of rest elements can vary, but the first element ...

Expanding and collapsing a single item in a ListView with React Native

I am currently encountering an issue with my list of Messages, where clicking on any message expands or collapses all messages instead of just the individual message clicked. See the code snippet below for more details on how each Tab Component is populate ...

Eliminate the "Potential 'undefined' Object" error without resorting to non-null assertion or optional chaining

Below is the code snippet I am working with: export type ConditionalItemType = [ { condition: string }, { [key: string]: FormItemDataType } ]; export type ConditionalItemDataType = ConditionalItemType[]; export type FormItemDataType = { required: bo ...

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

There is a Typescript namespace that contains a reserved word

I am currently working on upgrading the typings for "paypal-rest-sdk". Within this SDK, there is a method called payment.authorization.void(...); The issue arises when I realize that the @types/paypal-rest-sdk does not include the void method, and so I am ...

Explore the intricacies of React Navigation to access a screen buried deep within the

Consider the following arrangement of navigation: RootNavigator AppNavigator TabNavigator Home Profile How can I reach the Home Screen from the top? I attempted methods like navigation.navigate("AppNavigator", { screen: 'Ta ...

What could be the reason why React Native is getting uninstalled after using the react-native command to install a package?

After successfully installing react-native globally on my Windows 10 system and verifying the installation, I proceeded to use PowerShell to install materials-kit and vector-icons. Unfortunately, the installation of these packages failed, resulting in the ...

Surveying in TypeScript-React

I am currently working on incorporating a polling feature in React using TypeScript. This polling function is required to make a REST API call to retrieve a record from DynamoDB and then continue polling every 30 seconds until the 'Status' field ...

Exploring Recursive Types in TypeScript

I'm looking to define a type that can hold either a string or an object containing a string or another object... To achieve this, I came up with the following type definition: type TranslationObject = { [key: string]: string | TranslationObject }; H ...

Ways to capture targeted requests

Utilizing NestJS and Angular 2, I have noticed that both frameworks have a similar approach when it comes to working with Interceptors. I am currently looking for the best practice to identify specific requests in order to perform additional tasks. When d ...

One-of-a-kind npm module for typescript

As part of my project, I am enhancing an existing library to make it compatible with TypeScript. To showcase this modification, I have condensed it into a succinct Minimal working example The specified requirements To ensure backward compatibility, the li ...

"Revolutionizing the way we navigate: Angular's innovative

Presently, my focus is on incorporating route transitions into my project. I've employed a component that appears on click and triggers the corresponding service function: routeTransition(destination) { if (this.router.url !== destination) { t ...