microsoft / microsoft/vscode-react-native
[Documentation] Add comprehensive README section for Network Inspector feature
Nobody has claimed this yet.
- 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:
- Detailed setup instructions
- Troubleshooting common issues
- Platform-specific guidance (Android vs iOS)
- Examples of typical debugging workflows
- Integration with VS Code DevTools
- Security/certificate handling details
- Performance considerations
- 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
- Review existing GitHub issues related to Network Inspector for common pain points
- Test setup process on each platform to document accurately
- Capture screenshots of key UI elements
- Verify all commands and settings mentioned in docs
- 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
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
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