Unable to view XAML elements under ReactRootView in Live Visual Tree

[jonthysell]

Problem Description

If I want to inspect the XAML elements in an RNW app, I can't because there's nothing populated under the ReactRootView using the Visual Studio Live Visual Tree.

Steps To Reproduce

1. Start Metro with yarn start
2. Build and run an RNW app in Visual Studio in Debug
3. Open the Live Visual Tree

Expected Results

See elements under the ReactRootView.

CLI version

12.0.0-alpha.3

Environment

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.25393
  CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Memory: 1.67 GB / 15.84 GB
Binaries:
  Node:
    version: 16.18.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 8.19.2
    path: 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.33801.447 (Visual Studio Enterprise 2019)
    - 17.6.33801.468 (Visual Studio Enterprise 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

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

[jonthysell]

Try turning off "Just my XAML" in the debugger settings.

[jonthysell]

For the next person, this is the VS setting to uncheck: