Do you know these preview capabilities of DevEco Studio?

In today's Internet of Everything, developers need to consider the running effects of applications/services on different devices during application/service development. To meet this demand, DevEco Studio, as an integrated development environment (IDE) for HarmonyOS and OpenAtom OpenHarmony (“OpenHarmony”) application and service development, provides a powerful preview function, allowing developers to preview applications/services on different terminals. The UI display effect on the device not only supports previewing while developing, but also supports interface interaction during the previewing process. Now, let's take a look at the preview function of DevEco Studio.

1. Multi-terminal device preview

As a distributed operating system, OpenHarmony supports running on different terminal devices. In order to facilitate developers to view the UI layout and interaction effects of applications/services on different terminal devices, DevEco Studio provides a multi-terminal device preview function. The previewer of DevEco Studio supports custom preview device profiles (including resolution and language, etc.). By defining different preview device profiles, developers can view the preview effect of applications or services on different terminal devices.
Click on the upper right corner of the previewer

button, you can see all the defined preview device Profiles. By clicking to switch profiles of different preview devices, you can view the preview effects on different terminal devices. In addition, by turning on the Multi-profile preview switch, you can view the preview effects on multiple terminal devices at the same time.

Two, two-way preview

In the process of application/service development, developers usually need to view the preview effect while developing the code. To help developers improve development efficiency, DevEco Studio provides a two-way preview function, which supports the linkage between the code editor, the previewer UI interface and the Component tree.
● Select a component in the previewer UI interface, the corresponding component on the component tree will be selected, and the corresponding code block in the layout file in the code editor will be highlighted. In this way, the corresponding code can be quickly located through the UI interface of the previewer, which makes code modification more convenient.
● If the code block in the layout file is selected, it will be highlighted on the UI interface, and the component nodes on the component tree will also be selected. In this way, by selecting a code block, you can accurately view the preview effect of the corresponding interface component, making the preview more accurate and efficient.
● Select a component in the component tree, and the corresponding code block and UI interface will also be highlighted. In addition, if the properties of a component in the component tree are modified, the corresponding code in the code editor will also be modified synchronously.

3. Real-time preview In order to allow developers to quickly view the preview effect during application/service development, DevEco Studio provides a real-time preview function. After the developer adds or removes UI components and saves them with the shortcut Ctrl+S, the previewer will refresh the preview results immediately. If the properties of a component are simply modified, and the component has no bound variables, the previewer will refresh the preview results synchronously in sub-seconds without losing the current state of the page, achieving the effect of extremely fast preview. (Currently, only eTS components support this ultra-fast preview function.)

Fourth, dynamic preview Dynamic interaction is also a very important link in the application/service development process. To this end, DevEco Studio provides a dynamic preview function, which supports developers to perform interactive operations in the UI interface of the previewer, such as clicking, jumping, sliding interaction, etc. The operation experience is consistent with the interactive experience on real devices.

So far, the preview function of DevEco Studio has been introduced. It should be noted that before using the previewer of DevEco Studio, make sure that the Previewer resource has been installed in Settings > OpenHarmony SDK > Tools, and it is recommended to update the JS SDK in Settings > OpenHarmony SDK > Platforms to the latest version.

Want to know more and experience DevEco Studio
Welcome to tools and tool guides
https://docs.openharmony.cn/pages/v3.1/en-us/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md/

During the experience, if you encounter any problems, please post feedback to us through the Huawei Developer Forum
https://developer.huawei.com/consumer/cn/forum/block/deveco-studio