microsoft / microsoft/react-native-windows
Xaml islands setup: Devtools element inspector doesn't do anything
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Environment
Run the following in your terminal and copy the results here.
npx react-native --version: 4.14.0npx react-native info:
System:
OS: Windows 10 10.0.22000
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 37.50 GB / 63.93 GB
Binaries:
Node: 12.22.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
IDEs:
Android Studio: Version 4.1.0.0 AI-201.8743.12.41.7042882
Visual Studio: 16.10.31424.327 (Visual Studio Enterprise 2019)
Languages:
Java: Not Found
Python: 3.9.4 - C:\Python39\python.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.4 => 0.63.4
react-native-windows: 0.63.35 => 0.63.35
npmGlobalPackages:
*react-native*: Not Found
What SDK version are you building for? Choose from 10.0.15063, 10.0.16299, 10.0.19041, etc.
- Target Platform Version(s):
- Target Device(s): Desktop
- Visual Studio Version: Visual Studio 2019
- Build Configuration: Debug
Steps To Reproduce
Provide a detailed list of steps that reproduce the issue.
- Have your app set up with xaml islands
- With the app open, go into the window that's running metro and press "d" to open the developer window
- You should see this banner now, "Tap something to inspect it":

- Click around the app to try and inspect an element, and nothing happens
Expected Results
The inspector overlay should show information about the element and what styles are applied to it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce this with a React Native Windows app using XAML Islands: open the developer window with "d", then click the app while the "Tap something to inspect it" banner is shown. Trace the element inspector from that developer window entry point and verify that selecting an element displays its information and applied styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100