# DevEco Studio: Essential Features for HarmonyOS Development

 

Note: This guide focuses on core features for daily development. For comprehensive documentation, please refer to the official resources.

**

## Core Development Concepts

HarmonyOS applications are structured around Pages (UI components) and Abilities (application modules). Pages define visual elements, while Abilities handle business logic. Key distinctions:

* Pages: Contain UI elements (with/without @Entry decorator). Only entry-enabled Pages support real-time preview.

* Abilities: Serve as reusable components. Preview requires runtime execution. Tip: Temporarily add @Entry to custom controls for preview, but remove it post-testing to avoid runtime errors.

**

## Code Editing Essentials

### Key Features

* Default Entry: index.ets within the pages directory

* Smart Code Completion: Context-aware suggestions (e.g., component properties, API parameters)

* Class Creation: Prefer ArkTS File over Empty Page to avoid boilerplate code

* Trigger Suggestions: Alt + Enter (Windows) / Option + Enter (macOS)

### Workflow Optimization

``` typescript ```

typescript

复制

``` // Example: Efficient component creation @Entry @Component struct MainPage { build() { Column.create() .child(Text.create("Hello HarmonyOS")) } } ```

**

## Preview System

### Dual Preview Modes

| Mode | Behavior | Use Case | | :---------- | :----------------------------------- | :--------------------------- | | Interactive | Real-time interaction simulation | Debugging gestures/animation | | Static | Fast rendering without interactivity | Layout validation |

Recommendation: Use Static Preview during rapid iteration, switch to Interactive for complex interactions.

**

## Emulator Configuration

1. Access via Device Manager (toolbar green arrow)

2. Create custom profiles:

   * Select device template (Phone/Tablet/Car)

   * Configure resolution, memory, and sensors

3. Mirror real-world scenarios with multi-device synchronization

**

## Build & Execution

| Action | Shortcut | Description | | :--------------------- | :--------------- | :------------------------- | | Run Application | F5 / Green Arrow | Launch debug-enabled build | | Debug with Breakpoints | F9 | Step-through execution | | Release Build | Ctrl + F9 | Optimized production build |

**

## DevEco Profiler: Advanced Optimization

### Key Metrics Tracking

1. Memory Leak Detection

   * Visualize object lifecycle

   * Track reference chains

2. Rendering Performance

   * Identify overdraw patterns

   * Analyze layout hierarchy bottlenecks

3. Network Monitoring

   * Track API latency (ms)

   * Measure success/error rates

Pro Tip: Use the "Capture Heap Snapshot" feature to analyze memory allocation peaks.

**

## Pro Development Tips

* Keyboard Shortcuts: Master Ctrl + Alt + L (code formatting) and Ctrl + B (navigation to declaration)

* Component Tree: Navigate complex UIs via the Structure panel (Alt + 7)

* Version Control: Integrate Git directly within the IDE for seamless collaboration

For advanced configurations or troubleshooting, feel free to ask questions below. Happy coding with DevEco Studio!