Android View Dumper - VS Code Extension

A powerful VS Code extension for Android UI inspection and debugging. Visualize Android activity hierarchies, interact with device screenshots, and debug your Android applications directly within VS Code.

Overview

Android View Dumper is a VS Code extension that connects to Android devices via ADB (Android Debug Bridge) to provide visual inspection of Android UI hierarchies. It displays device screenshots alongside interactive tree views of view structures, enabling efficient debugging and analysis of Android application layouts.

Features

Device Connection: Connect to Android devices via ADB with automatic device detection
Interactive Screenshots: Display device screenshots with click-to-highlight functionality
Hierarchical View Tree: Visualize Android view hierarchies in an expandable tree structure
Bidirectional Highlighting:
- Click on screenshot elements to highlight corresponding nodes in the tree view
- Click on tree nodes to highlight corresponding regions in the screenshot
View Property Inspection: Examine detailed properties of each Android view element
Real-time Updates: Refresh device snapshots and view hierarchies on demand
ADB Integration: Leverages standard Android debugging tools for reliable device communication
VS Code Native Integration: Seamlessly works within your VS Code development environment

Prerequisites

VS Code (version 1.85.0 or higher)
Node.js and npm (for development/build)
Android SDK with ADB installed and configured
Android device connected via USB with USB debugging enabled

Installation

From VS Code Marketplace

(Note: This extension may not yet be published to the marketplace)

Open VS Code
Go to Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "Android View Dumper"
Click Install

From Source

Clone the repository:

git clone <repository-url>
cd automator2

Install dependencies:
```
npm install
```
Build the extension:
```
npm run compile
```
Run in development mode:
- Open the project in VS Code
- Press F5 to launch a new VS Code window with the extension loaded

Usage

Opening the Extension

Launch VS Code with the extension installed
Open the "Android View Dumper" view in the Explorer sidebar
Use the toolbar buttons to:
- Refresh Devices: Update the list of available ADB devices
- Connect Device: Connect to a selected Android device
- Refresh Snapshot: Update the device screenshot and view hierarchy
- Open Android View Dumper: Open the main inspection panel

Main Inspection Panel

The main panel features a two-column layout:

Left Panel: Device screenshot display
- Click on any UI element to highlight its corresponding node in the tree view
- Mouse-over shows element boundaries
Right Panel: Android view hierarchy tree
- Expandable tree structure showing all view elements
- Each node displays view properties (class, bounds, resource ID, etc.)
- Click on nodes to highlight corresponding regions in the screenshot

Available Commands

Access these commands via VS Code Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

Android View Dumper: Refresh Device Snapshot - Update the current device view
Android View Dumper: Connect to Device - Connect to an Android device
Android View Dumper: Show ADB Devices - List available ADB devices
Android View Dumper: Open Android View Dumper - Open the main inspection panel

Development

Project Structure

src/
├── extension.ts                 # Main extension entry point
├── androidViewDumperProvider.ts # Core provider implementation
├── androidViewDumperWebview.ts  # Webview panel implementation
├── androidViewNodeTypes.ts     # Type definitions for Android view nodes
└── webview.ts                  # Webview UI logic

Building from Source

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch mode for development
npm run watch

# Create VSIX package (for distribution)
npm run package

Architecture

Extension Entry Point (extension.ts): Registers the data provider and commands
Data Provider (androidViewDumperProvider.ts): Handles ADB communication, XML parsing, and data processing
Webview UI (androidViewDumperWebview.ts, webview.ts): Manages the interactive inspection panel
Type Definitions (androidViewNodeTypes.ts): Defines data structures for Android view nodes

Dependencies

@vscode-elements/elements: UI component library for VS Code extensions
fast-xml-parser: XML parsing library for Android view hierarchy data
@types/vscode: TypeScript definitions for VS Code API

Troubleshooting

Common Issues

"No devices found":
- Ensure ADB is installed and in your PATH
- Verify Android device is connected via USB with USB debugging enabled
- Run adb devices in terminal to check device recognition
"Failed to get screenshot":
- Ensure device screen is unlocked
- Check ADB permissions on the device
- Try reconnecting the device
Extension not loading:
- Check VS Code developer tools console for errors
- Verify all dependencies are installed (npm install)
- Ensure TypeScript compilation succeeded

Logging

The extension logs detailed information to the "Android View Dumper" output channel. Access it via:

View → Output (Ctrl+Shift+U / Cmd+Shift+U)
Select "Android View Dumper" from the dropdown

Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Maintain existing code style and conventions
Add appropriate tests for new functionality
Update documentation as needed

License

This project is licensed under the Apache License 2.0. See the LICENSE file for details.

Acknowledgments

Built with VS Code Extension API
Uses fast-xml-parser for efficient XML parsing
Inspired by Android UI debugging tools and needs of Android developers

Note: This extension requires proper ADB setup and Android device connection. Performance may vary based on device and ADB version.

Android View Dumper

juicebeer