microsoft / microsoft/vscode-react-native

[Documentation] Add comprehensive README section for Network Inspector feature

Open
#2,949 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

📚 documentation follow-up
Dominant language
TypeScript
Stars
2.7k
Forks
295
Avg merge
11h 17m
Merged PRs (30d)
24

Description

Summary

The Network Inspector feature is a significant capability of the extension but lacks comprehensive documentation in the main README file.

Current Documentation Status

README.md (lines 1084-1120):

  • Basic overview and screenshot
  • Requirements (OpenSSL, idb for macOS)
  • Flipper integration mention
  • Basic usage commands
  • Theme configuration
  • Note about Expo not being supported

Missing Documentation:

  1. Detailed setup instructions
  2. Troubleshooting common issues
  3. Platform-specific guidance (Android vs iOS)
  4. Examples of typical debugging workflows
  5. Integration with VS Code DevTools
  6. Security/certificate handling details
  7. Performance considerations
  8. Known limitations beyond Expo

Proposed Improvements

1. Expand Setup Instructions

Add platform-specific setup steps:

  • Windows OpenSSL installation details
  • macOS idb setup troubleshooting
  • Android device/emulator requirements
  • iOS physical device requirements
2. Add Workflow Examples

Include practical debugging scenarios:

### Example: Debugging API Calls

1. Start your React Native app
2. Run `React Native: Run Network Inspector`
3. Open DevTools Console (Help > Toggle Developer Tools)
4. Reproduce the network issue
5. Inspect request/response in console output
3. Add Troubleshooting Section
### Common Issues

**Network Inspector won't connect:**
- Ensure OpenSSL is in PATH
- Check device is visible via `adb devices` (Android) or `idb list-targets` (iOS)
- Verify Flipper plugin is enabled in app

**Certificate errors:**
- Re-run Network Inspector to regenerate certificates
- Check device certificate trust settings

**No requests appearing:**
- Verify app is using network inspector integration
- Check DevTools console is open
- Ensure React Native debugger is not blocking
4. Document Integration Points

Explain how Network Inspector integrates with:

  • Flipper network plugin
  • React Native network stack
  • VS Code extension architecture
  • Certificate management
5. Add Platform Matrix
| Platform | Physical Device | Emulator/Simulator | Notes |
|----------|----------------|-------------------|-------|
| Android  | ✅ Supported   | ✅ Supported      | Requires adb |
| iOS      | ✅ Supported   | ✅ Supported      | Requires idb for physical |
| Expo     | ❌ Not Supported | ❌ Not Supported | Use Expo DevTools |
| Windows  | ⚠️ Limited     | ⚠️ Limited       | May require additional setup |
6. Link to Related Resources

Add references to:

  • Flipper documentation
  • Network debugging best practices
  • Related VS Code commands
  • Extension settings for Network Inspector

Content Organization

Suggested README structure for Network Inspector section:

# Network Inspector

## Overview
[Current intro paragraph]

## Requirements
[Expanded platform-specific requirements]

## Setup
### Android Setup
### iOS Setup
### Windows Setup

## Usage
### Starting Network Inspector
### Viewing Network Requests
### Filtering and Searching

## Configuration
[Existing theme configuration]
### Additional Settings

## Troubleshooting
[Common issues and solutions]

## Platform Support
[Support matrix]

## Examples
[Debugging workflows]

## Known Limitations
[Expanded limitations section]

## Related Commands
[Links to other commands]

Benefits

  • Better user onboarding: Clear setup instructions reduce support burden
  • Reduced confusion: Troubleshooting section addresses common issues
  • Feature visibility: More complete documentation encourages feature adoption
  • User success: Examples help users leverage the feature effectively
  • Maintenance: Comprehensive docs reduce repeated questions

Implementation Notes

  1. Review existing GitHub issues related to Network Inspector for common pain points
  2. Test setup process on each platform to document accurately
  3. Capture screenshots of key UI elements
  4. Verify all commands and settings mentioned in docs
  5. Consider creating a separate NETWORK_INSPECTOR.md if section becomes too large

Related Work

  • Network Inspector implementation: src/extension/networkInspector/
  • Recent network view tests: PR #2916
  • Network inspector smoke tests: test/smoke/suites/networkInspector.test.ts
  • Commands: reactNative.startNetworkInspector, reactNative.stopNetworkInspector

References

  • Current README section: lines 1084-1120
  • Network inspector commands table: lines 133-134
  • Related: Issue #2946 (network inspector command tests)

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

Start with the Network Inspector section in README.md at lines 1084-1120, then review src/extension/networkInspector/, test/smoke/suites/networkInspector.test.ts, and the commands reactNative.startNetworkInspector and reactNative.stopNetworkInspector. Check the referenced requirements, platform behavior, and related tests before organizing setup, workflows, troubleshooting, limitations, and links. Done means the README accurately covers the proposed Network Inspector guidance and verified commands.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript, vscode
Domain
developer-experience, documentation, mobile-dev
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.