microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.27k stars 1.14k forks source link

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

Open vidager opened 2 years ago

vidager commented 2 years ago

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

jonthysell commented 2 years ago

Is it possible that Chrome can't access local files by design? Does this work for direct debugging on other platforms?

@aeulitz Is this something you're looking into?

jonthysell commented 2 years ago

@aeulitz Can you look into this? Is this still something that makes sense for 0.69 or should it be moved to 0.70?

jonthysell commented 2 years ago

@aeulitz Any updates on this?