microsoft / microsoft/react-native-windows

chrome:inspect breakpoints w/Hermes not hit when set on files from local drive

Open
#9,852 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Developer Experience Area: JavaScript Engine bug Workstream: Developer Experience
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

When direct debugging Hermes with chrome:inspect, breakpoints set on local file system files don't work. Instead, you have to open the files from the localhost:8081 address, which is painful as you can only do that with CTRL+P. Instead, you should be able to add your local workspace, navigate files naturally and set breakpoints that way.

When using the vscode-react-native plugin to VSCode, it seems to leverage the sourcemap correctly to allow breakpoints to be set/hit on your local workspace files.

Steps To Reproduce
  1. Build, install, launch with Hermes
  2. Use chrome or edge and run chrome:inspect
  3. Connect to your hermes endpoint
  4. If you don't already have your local workspace mapped, add it
  5. Navigate to a file where you can set a breakpoint that should be hit and set a breakpoint
  6. Exercise the app to hit the breakpoint
  7. Notice breakpoint is not hit
  8. Open the same file with CTRL+P, ensuring it's the version starting with localhost:8081
  9. Set the same breakpoint
  10. Exercise the app to hit the breakpoint
  11. Notice breakpoint is hit
Expected Results

Breakpoints can be hit in local files from added workspace

CLI version

6.4.0

Environment
System:
    OS: Windows 10 10.0.22598
    CPU: (20) x64 Intel(R) Xeon(R) W-2255 CPU @ 3.70GHz
    Memory: 36.38 GB / 63.69 GB
  Binaries:
    Node: 16.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.3 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.32407.337 (Visual Studio Enterprise 2019)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: 6.4.0 => 6.4.0
    react: 17.0.2 => 17.0.2
    react-native: 0.67.3 => 0.67.3
    react-native-windows: 0.67.6 => 0.67.6
  npmGlobalPackages:
    *react-native*: Not Found
Target Platform Version

No response

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2019

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the failure with chrome:inspect and a Hermes build, comparing breakpoints in a mapped local workspace with the localhost:8081 file. Read the sourcemap handling used by the vscode-react-native plugin as a reference, then verify that local-file breakpoints resolve and hit in the reported Windows setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.