鸿蒙HarmonyOS应用开发：多端设备预览效果-Profile Manager

由于真机设备有丰富的设备型号，不同设备型号的屏幕分辨率可能不一样。因此，在HarmonyOS应用/服务开发过程中，由于设备类型繁多，可能需要查看在不同设备上的界面显示效果。对此，DevEco Studio的预览器提供了Profile Manager功能，支持开发者自定义预览设备Profile（包含分辨率和语言），从而可以通过定义不同的预览设备Profile，查看HarmonyOS应用/服务在不同设备上的预览显示效果。当前支持自定义设备分辨率及系统语言。

定义设备后，可以在Previewer右上角，单击按钮，打开Profile管理器，切换预览设备。

同时，Profile Manager还支持多设备预览功能，具体请参考查看多端设备预览效果。

下面以自定义一款Phone设备为例，介绍设备Profile Manager的使用方法。

1. 在预览器界面，打开Profile Manager界面。

   

2. 在Profile Manager界面，单击+ New Profile按钮，添加设备。

   

3. 在Create Profile界面，填写新增设备的信息，如Profile ID（设备型号）、Device type（设备类型）、Resolution（分辨率）和Language and region（语言和区域）等。其中Device type只能选择module.json5中deviceTypes字段已定义的设备。

   

4. 设备信息填写完成后，单击OK完成创建。

DevEco Studio支持HarmonyOS分布式应用/服务开发，同一个应用/服务可以运行在多个设备上。在HarmonyOS分布式应用/服务的开发阶段，因不同设备的屏幕分辨率、形状、大小等不同，开发者需要在不同的设备上查看应用/服务的UI布局和交互效果，此时便可以使用多端设备预览器功能，方便开发者在应用/服务开发过程中，随时查看不同设备上的界面显示效果。

说明

多端设备预览最多同时支持4个设备的预览。

前面介绍了DevEco Studio支持ArkTS、JS应用/服务的预览器功能，多端设备预览器支持ArkTS、JS应用/服务在不同设备上的同时预览。如果两个设备支持的编码语言不同，就不能使用多端设备预览功能。

下面以ArkTS应用/服务为例，介绍多端设备预览器的使用方法，JS应用/服务的多端设备预览器使用方法相同。

1. 在工程目录中，打开任意一个ets文件（JS请打开hml/css/js文件）。
2. 可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：
   • 通过菜单栏，单击View>Tool Windows>Previewer，打开预览器。
   • 在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。
3. 在Previewer窗口中，打开Profile Manager中的Multi-profile preview开关，同时查看多设备上的应用/服务运行效果。

   说明

   多端设备预览不支持动画的预览，如果需要查看动画在设备上的预览效果，请关闭Multi-device preview功能后在单设备预览界面进行查看。

   

   多设备预览效果如下图所示：