microsoft / microsoft/react-native-windows

Xaml islands setup: Devtools element inspector doesn't do anything

Open
#8,328 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Developer Experience Area: Developer Menu Area: Islands bug Workstream: Developer Experience
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.

  1. npx react-native --version: 4.14.0
  2. npx 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.

  1. Have your app set up with xaml islands
  2. With the app open, go into the window that's running metro and press "d" to open the developer window
  3. You should see this banner now, "Tap something to inspect it":
    MicrosoftTeams-image (13)-1
  4. 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.