Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[dev-menu] Integrate javascript inspector #13041

Merged
merged 5 commits into from
May 31, 2021
Merged

Conversation

Kudo
Copy link
Contributor

@Kudo Kudo commented May 25, 2021

Why

To support hermes inspector in dev-menu

How

Add a menu item

in expo/expo-cli#3495, we added /inspector endpoint to dev-server which supports querying or opening inspector.
and in this pr, we added a menu item to integrate the function.

js runtime w/ inspector support, the item is enabled. e.g. Hermes.

js runtime w/o inspector support, the item is disabled. e.g. JSC.

dev-menu and dev-launcher fixes

  • dev-menu adds an extra EXDevMenuApp bundle which will make sources in inspector missing the target source code.
    there is a workaround and see code comment for details.
  • the debugging app will create a different connection to metro other than packager. to make dev-launcher works with a remote packager, we should also intercept the inspector connection.

Test Plan

BareExpo + JSC

  1. use latest expo-cli to run /path/to/expo-cli/packages/expo-cli/bin/expo.js start --dev-client
  2. expect to show the menu item in disabled state.

BareExpo + Hermes

  1. use latest expo-cli to run /path/to/expo-cli/packages/expo-cli/bin/expo.js start --dev-client
  2. yarn add 'react-native-reanimated@2.2.0' # Fix inspecting crash issue
  3. expect to show the menu item, clicking the item will open an inspector in chrome or edge.
  4. expect in the inspector sources tab, there is BareExpo's javascript source code.

BareSandbox + Hermes

  1. use latest expo-cli to run /path/to/expo-cli/packages/expo-cli/bin/expo.js start --dev-client
  2. yarn add 'react-native-reanimated@2.2.0' # Fix inspecting crash issue
  3. Update apps/bare-sandbox/android/app/build.gradle to make enableHermes: true
  4. adb reverse tcp:8081 --remove # make sure there is no localhost:8081 tunnel for inspector connection
  5. expect to show the menu item, clicking the item will open an inspector in chrome or edge.
  6. expect in the inspector sources tab, there is BareSandbox's javascript source code.

Copy link
Collaborator

@expo-bot expo-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The review previously left here is no longer valid, jump to the latest one 👉 #13041 (review)

@expo-bot expo-bot added the bot: suggestions ExpoBot has some suggestions label May 25, 2021
Kudo added a commit that referenced this pull request May 27, 2021
# Why

After #13041, we will have inspector support.
Sometimes, the inspector is not available, for example, app uses JSC runtime.
In such case, we should better to add JS runtime information to UI for trouleshooting.

# How

Hermes has `global.HermesInternal` property existed in JS.
Check the property and add the DevMenuAppInfo.

# Test Plan

### BareExpo + JSC
1. Show dev menu

### BareExpo + Hermes
1. Change enableHermes: true in apps/bare-expo/android/app/build.gradle
2. Show dev menu
@Kudo Kudo force-pushed the @kudo/dev-menu-js-inspector branch from 64b25d4 to e5b8f71 Compare May 29, 2021 15:16
@Kudo Kudo changed the title [dev-menu] Add JS inspector menu item [dev-menu] Integrate JS inspector May 29, 2021
Copy link
Collaborator

@expo-bot expo-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The review previously left here is no longer valid, jump to the latest one 👉 #13041 (review)

@Kudo Kudo changed the title [dev-menu] Integrate JS inspector [dev-menu] Integrate javascript inspector May 29, 2021
@expo-bot expo-bot removed the bot: suggestions ExpoBot has some suggestions label May 29, 2021
Copy link
Collaborator

@expo-bot expo-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The review previously left here is no longer valid, jump to the latest one 👉 #13041 (review)

@expo-bot expo-bot added the bot: passed checks ExpoBot has nothing to complain about label May 29, 2021
Copy link
Collaborator

@expo-bot expo-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi there! 👋 I'm a bot whose goal is to ensure your contributions meet our guidelines.

Looks like I have nothing to complain about 👏 Keep up the good work! 💪

Generated by ExpoBot 🤖 against 56a19a7

@Kudo Kudo marked this pull request as ready for review May 30, 2021 04:52
@Kudo Kudo requested a review from lukmccall May 30, 2021 04:53
Copy link
Contributor

@lukmccall lukmccall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@Kudo
Copy link
Contributor Author

Kudo commented May 31, 2021

Thanks for the review and approval 🤗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: passed checks ExpoBot has nothing to complain about
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants