search

microsoft / react-native-windows

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

Unable to direct debug JS (VS + Chakra + bundle) because of inaccessible source map #11235

Open jonthysell opened 1 year ago

jonthysell commented 1 year ago

Problem Description

When using Visual Studio to Direct Debug an RNW app using Chakra, it works fine when using Metro because the bundle specifies a full source map URL (pointed at http://localhost:8081) that the VS debugger can load in order to get source-stepping and breakpoints.

However, when building an offline bundle file, the source map URL in the bundle file is set to the relative index.windows.bundle.map. So while VS can technically connect to the app with Direct Debugging, it fails to load the map, so you lose source-stepping and breakpoints.

The problem is two-fold:

  1. The source map is generated, but is saved to $(ProjectDir)$(OutDir)\sourcesmaps\react, which is not included in the final appx
  2. Even if the map was added to the appx, the bundle file would need to specify a fully-qualified path that the debugger can access.

Steps To Reproduce

  1. Create a new RNW app.
  2. Build and run the app with an offline bundle (yarn windows --no-packager --msbuildprops UseBundle=true)
  3. Enable the Direct Debugger via the app's Developer Menu
  4. Use Visual Studio and attach to the app's process with type: Script

Expected Results

Debugger attaches. I can set breakpoints and step through the source.

CLI version

npx react-native --version

Environment

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.25300
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 1.33 GB / 15.84 GB
  Binaries:
    Node: 16.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.18362.0, 10.0.19041.0, 10.0.22000.0, 10.0.22621.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.33214.272 (Visual Studio Enterprise 2019), 17.4.33403.182 (Visual Studio Enterprise 2022)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0
    react-native: 0.71.0 => 0.71.0
    react-native-windows: 0.71.0 => 0.71.0
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

None

Build Configuration

DebugBundle

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

No response

jonthysell commented 1 year ago

I have confirmed that if I manually edit the bundle file and specify the full path on disk to the source map file, the debugger will work correctly.

I've also confirmed that I can modify the Bundle.props file to put the source map alongside the bundle file in the Bundle folder so it's included in the appx (or just in the build output for unpackaged apps).

I've not confirmed if it's possible for the debugger to actually load the source map out of the appx via a ms-appx:// url.

Also I'm not entirely sure it would even make sense to include the source map file in any final build output, given that the source map file itself maps to the original source paths on the disk, which must be present for debugging to work.

chrisglein commented 1 year ago

If we try --sourcemap-use-absolute-path does that fix the default case here?