Skip to content

Enhanced Status Bar with Packager Port and Device Indicator#2557

Merged
ConnorQi01 merged 2 commits intomasterfrom
dev/v-peq/statusBar_enhancement
Mar 16, 2026
Merged

Enhanced Status Bar with Packager Port and Device Indicator#2557
ConnorQi01 merged 2 commits intomasterfrom
dev/v-peq/statusBar_enhancement

Conversation

@ConnorQi01
Copy link
Copy Markdown
Collaborator

Summary

This PR enhances the status bar to provide better visibility into the debugging environment by:

  1. Displaying the packager port number in the status bar
  2. Adding a device status indicator showing the active debug target

Changes

1. Packager Port Display

  • Modified PackagerStatusIndicator to show the port number (e.g., :8081) next to the packager icon
  • Port information is displayed in both full and short display modes
  • Port is cleared when packager stops

Files changed:

  • src/common/packager.ts - Pass port to status indicator
  • src/extension/packagerStatusIndicator.ts - Display port in status bar text

2. Device Status Indicator

  • Added new DeviceStatusIndicator class to show currently connected device/simulator
  • Displays device name with mobile icon during active debug sessions
  • Automatically hides when debug session ends

Files changed:

  • src/extension/deviceStatusIndicator.ts - New status indicator component
  • src/extension/appLauncher.ts - Show device name when app launches
  • src/debugger/debugSessionBase.ts - Hide indicator on session end
  • src/extension/generalMobilePlatform.ts - Expose getResolvedTarget() method

3. Code Cleanup

  • Fixed import ordering in rnDebugSession.ts and cleanRestartPackager.ts

Screenshots

Before:

$(debug-start) React Native Packager  $(debug-restart)

After:

$(debug-start) React Native Packager :8081  $(debug-restart)  $(device-mobile) Pixel_2(AVD)

Testing

  • Tested with Android emulator
  • Verified port display updates correctly
  • Verified device indicator shows/hides appropriately
  • Confirmed no conflicts with master branch

Benefits

  • Developers can quickly see which port the packager is running on
  • Active debug target is clearly visible in the status bar
  • Improves debugging workflow transparency

- Display packager port number in status bar (e.g., ":8081")
- Add DeviceStatusIndicator to show current debugging device
- Clean up device indicator on debug session end
- Expose getResolvedTarget() method in GeneralMobilePlatform
@ConnorQi01
Copy link
Copy Markdown
Collaborator Author

/azp run

@azure-pipelines
Copy link
Copy Markdown

Azure Pipelines successfully started running 1 pipeline(s).

@ConnorQi01 ConnorQi01 merged commit 91363a9 into master Mar 16, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Enhanced Status Bar with Packager Port and Device Indicator

2 participants